Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Navigation

Tailwind CSS Menu

Tailwind CSS Menu is an advanced navigation component that offers versatile support for inline, accordion, and dropdown menu modes, providing responsive and user-friendly navigation solutions for your web projects.

Default Menu

To add a basic menu with default styling use the menu and menu-default classes.
Preview HTML

Advanced Item

This example demonstrates an advanced menu items with icons, badges, and titles.
Preview HTML

Separator

To separate menu item groups menu-separator class.
Preview HTML

Horizontal

This example demonstrates a horizontal menu usage.
Preview HTML

States

Tailwind CSS Menu component supports hover , active , show , here and focus states. Explore detailed information about each state by referring to the Tailwind CSS Menu Classes guide.
Preview HTML

Accordion - Basic

Utilize the Tailwind CSS KTMenu component to enable accordion-style submenu support for your menus.
Preview HTML

Accordion - Default Open

Use active and show classes on an menu item to display a specific submenu by default.
Preview HTML

Accordion - Expand All

Use data-menu-accordion-expand-all="true" attribute to keep all submenus visible at all times despite toggling other.
Preview HTML

Accordion - Arrow Icon

Enhance your accordion submenu with custom toggle icons.
Preview HTML

Accordion - Multi-level

Tailwind CSS KTMenu provides robust support for multi-level accordion submenus, allowing you to create deeply nested navigation structures with ease and flexibility.
Preview HTML

Accordion - Reverse

Utilize the Tailwind CSS flex-col-reverse class in conjunction with the menu-item class to showcase the submenu accordion from the top, deviating from its default behavior which is to expand from the bottom. Apply the menu-no-indent class to the menu-accordion element to reset the submenu indentation.
Preview HTML

Accordion - Dropdown

Integrate a Tailwind CSS Menu accordion submenu with its dropdown submenu to create a hierarchical navigation structure that is user-friendly and visually organized.
Preview HTML

Dropdown - Basic

Utilize the Tailwind CSS KTMenu component to enable dropdown submenu support for your menus.
Preview HTML

Dropdown - Horizontal

This example showcases a horizontal Tailwind CSS Menu with dropdown submenus, offering a clear and organized layout for navigation.
Preview HTML

Dropdown - Button

This example demonstrates a toggle button for a Tailwind CSS Menu with a dropdown submenu, providing a user-friendly way to navigate through the menu options.
Preview HTML

Dropdown - Multi-level

Tailwind CSS KTMenu provides robust support for multi-level dropdown submenus, allowing you to create deeply nested navigation structures with ease and flexibility.
Preview HTML

Dropdown - With Modal

Incorporate a Tailwind CSS Menu within a Tailwind CSS Modal component to enhance user interaction and create a seamless experience, especially for advanced use cases.
Preview HTML

Dropdown - With Tooltip

Combine a Tailwind CSS Menu with a Tailwind CSS Tooltip to enhance user navigation and provide additional contextual information, resulting in a more interactive and intuitive user experience.
Preview HTML

Dropdown - Accordion

Integrate a Tailwind CSS Menu dropdown submenu with its accordion-style submenu to create a hierarchical navigation structure that is user-friendly and visually organized.
Preview HTML

Dropdown - Scrollable

Integrate the Tailwind CSS Scrollable component to efficiently manage a lengthy list of menu items, ensuring a smooth and user-friendly navigation experience.
Preview HTML

Dropdown - Permanent

Apply the data-menu-item-permanent="true" attribute to a menu item to keep its dropdown submenu open, ensuring it stays visible after being clicked.
Preview HTML

Dropdown - Dismiss

Apply the data-menu-dismiss="true" attribute to any element within the Tailwind CSS KTMenu Sub-menu element to ensure the dropdown sub-menu closes upon click.
Preview HTML

Dropdown - Placement

Use data-menu-item-placement attribute with [top|bottom|left|right]-start , [top|bottom|left|right] , [top|bottom|left|right]-end placement options for the Tailwind CSS Menu to ensure that the dropdown appears relative to the toggle element in the desired position.
Preview HTML

Dropdown - Trigger

Use the data-menu-item-trigger attribute with the hover and click options to enable the submenu to be triggered either by user click or hover actions.
Preview HTML

Dropdown - Offset

Use data-menu-item-offset="10px, 10px" attribute to add distance between the menu toggle and dropdown element. The pair of x,y value in pixel translates the floating element along the x and y axes.
Preview HTML

Dropdown - Overflow

Utilize the data-menu-item-overflow="true" attribute to ensure that dropdown submenus are displayed within a scrollable menu container, offering a seamless user experience even with a large number of menu items.
Preview HTML

Dropdown - Responsive

Set the data-menu-item-toggle attribute value to accordion|lg:dropdown to ensure that Tailwind CSS Menu submenus are displayed appropriately across different devices, with an accordion-style display on smaller screens and a dropdown display on larger screens.
Preview HTML

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Menu component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/menu/menu.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Menu component.
src/core/plugins/components/menu.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Menu component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Menu component.
Basic Dropdown Accordion 
				
					<div class="menu menu-default flex flex-col border rounded-lg w-full max-w-56 py-2">
 <div class="menu-item">
  <a class="menu-link" href="#">
   <span class="menu-icon">
    <i class="ki-outline ki-badge">
    </i>
   </span>
   <span class="menu-title">
    Menu item 1
   </span>
   <span class="menu-badge">
    <span class="badge badge-circle badge-success size-5">
     5
    </span>
   </span>
  </a>
 </div>
 <div class="menu-item">
  <a class="menu-link" href="#">
   <span class="menu-icon">
    <i class="ki-outline ki-profile-circle">
    </i>
   </span>
   <span class="menu-title">
    Menu item 2
   </span>
  </a>
 </div>
</div>

Classes

This table details the custom CSS classes used for styling the Tailwind CSS Menu component.
Class Description
menu Root class of Tailwind CSS Menu component.
menu-default Applies default styling for Tailwind CSS Menu component.
menu-accordion Provides accordion-style interaction for submenu items.
menu-no-indent Removes the indentation for the accordion submenu items.
menu-dropdown Enables dropdown functionality for submenu items.
menu-separator Adds a separator line between menu items for visual distinction.
menu-item Represents a single item within the menu.
menu-link Defines a link within a menu item, typically navigable.
menu-arrow Indicates the presence of a submenu or collapsible section.
menu-title Specifies the title for the menu item.
menu-icon Used for adding an icon to the menu link, enhancing visual identification.
menu-badge Displays a badge, like a notification count, next to a menu link.
active Marks the menu item as active or currently selected.
here Indicates the current location within the menu hierarchy, used on a menu item.
show Used to reveal a submenu or dropdown for a menu item, typically in a dynamic or responsive layout.
focus Applies focus styling to the menu item, usually for accessibility purposes.
disabled Disables a menu item, making it non-interactive and visually distinct.

Variants

Utilize the following Tailwind CSS Menu variants to manage the appearance of the menu items and their child elements. For more information, refer to the Tailwind CSS Variant documentation .
Class Description
menu-item-active: Applies styles when the menu item is active or currently selected.
menu-item-hover: Applies styles when the mouse pointer hovers over the menu item.
menu-item-here: Designates the menu item as the current location within the menu hierarchy.
menu-item-show: Controls the display of submenu items, typically used to show them on demand.
menu-item-focus: Applies styles when the menu item gains focus, usually through keyboard navigation. 
				
					<div class="menu-item active" data-menu-item-toggle="accordion" data-menu-item-trigger="click">
 <a class="menu-link" href="#">
  <span class="menu-icon">
   <i class="ki-outline ki-coffee">
   </i>
  </span>
  <span class="menu-title menu-item-active:text-success menu-item-hover:text-primary">
   Menu title
  </span>
  <span class="menu-arrow">
   <i class="ki-outline ki-plus menu-item-show:hidden">
   </i>
   <i class="ki-outline ki-minus hidden menu-item-show:block">
   </i>
  </span>
 </a>
</div>

Data Attribute Initialization

Auto-initialize all KTMenu instances on page load by adding the data-menu="true" attribute to your menu element. This triggers on the fly initialization by the KTMenu JavaScript component. 
				
					<div class="menu menu-default" data-menu="true" id="my_menu">
 ...
</div>
These attributes allow you to set options for the KTMenu component during initialization. The values you provide as strings are automatically converted to the appropriate KTMenu Options .
HTML Attribute Type Default Description
data-menu boolean true Used to auto-initialize KTMenu instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
data-menu-dismiss boolean true Apply to any element within KTMenu Sub-menu instance to ensure the dropdown sub-menu closes upon click.
data-menu-dropdown-zindex number 105 Sets the z-index for the dropdown menu to ensure it stacks above or below other elements as needed.
data-menu-dropdown-hover-timeout number 200 Specifies the delay in milliseconds before the dropdown menu opens or closes when hovered.
data-menu-accordion-expand-all boolean false Determines whether multiple submenu items in the accordion can be expanded simultaneously.
data-menu-item-toggle
enum
"accordion" | "dropdown"
"accordion" Defines the toggle behavior for menu items; can be set to use accordion or dropdown mechanics.
data-menu-item-trigger
enum
"click" | "hover"
"click" Specifies the trigger action for opening submenu items, either on click or hover.
data-menu-item-offset string "0, 5px" Sets a distance(the x and y axes) between the menu item toggle and dropdown submenu element.
data-menu-item-offset-rtl string "0, 5px" Sets a distance(the x and y axes) between the menu item toggle and dropdown submenu element for RTL languages.
data-menu-item-permanent boolean false Used to configure a menu item in such a way that its dropdown submenu remains open after being clicked.
data-menu-item-placement
enum
"left-start" | "left" | "left-end" | "right-start" | "right" | "right-end" | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"
- Determines the position of the submenu in relation to the menu item, with options for alignment and orientation.
data-menu-item-placement-rtl
enum
"left-start" | "left" | "left-end" | "right-start" | "right" | "right-end" | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"
- Determines the position of the submenu for RTL languages, in relation to the menu item, with options for alignment and orientation.

JavaScript Initialization

To initialize a new menu component, pass the corresponding DOM element and configuration options to the KTMenu class constructor.
JavaScript HTML 
				
					const menuEl = document.querySelector('#my_menu');
const options = {
	dropdownZindex: 105,
	dropdownHoverTimeout: 300,
	accordionExpandAll: true
};

const menu = new KTMenu(menuEl, options);

To initialize the menu with JavaScript, use data-menu="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Menu instances, using the KTMenu JavaScript component.
Option Type Default Description
dropdownZindex number 105 Sets the z-index for the dropdown menu to ensure it stacks above or below other elements as needed.
dropdownHoverTimeout number 200 Specifies the delay in milliseconds before the dropdown menu opens or closes when hovered.
accordionExpandAll boolean false Determines whether multiple submenu items in the accordion can be expanded simultaneously.

Utilities

Manage and interact with KTMenu instances using these static methods of KTMenu class.
Method Description
init() Automatically initializes KTMenu object for all elements with the data-menu="true" attribute on page load.
createInstances() Allows to create KTMenu instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTMenu object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTMenu object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all menus
KTMenu.init()

// Initialzie pending menus
KTMenu.createInstances();

// Get menu object
const menuEl = document.querySelector('#my_menu');
const menu = KTMenu.getInstance(menuEl);

Methods

Use KTMenu component's API methods to programmatically control its behavior.
Method Description
new KTMenu(element, options) Creates an object instance of KTMenu class for the given DOM element and configuration options .
show(itemElement) Shows submenu of menu item associated with itemElement DOM element.
hide(itemElement) Hides submenu of menu item associated with itemElement DOM element.
toggle(itemElement) Toggles the visibility of submenu for the menu item associated with itemElement DOM element.
reset(itemElement) Resets the state of the menu item and its submenu associated with itemElement DOM element to its default state.
getItemTriggerMode(itemElement) Gets the trigger mode (click or hover) of the menu item associated with itemElement DOM element.
getItemToggleMode(itemElement) Retrieves the toggle mode (accordion or dropdown) of the menu item associated with itemElement DOM element.
setActiveLink(linkElement) Sets the specified linkElement as the active link in the menu.
getLinkByAttribute(linkElement) Finds and returns a menu link that matches the specified attribute of linkElement .
getItemLinkElement(linkElement) Gets the link element within the menu item associated with the specified linkElement .
getItemElement(linkElement) Retrieves the menu item element associated with the specified linkElement .
getItemSubElement(linkElement) Obtains the submenu element of the menu item associated with the specified linkElement .
getItemParentElements(linkElement) Gets all parent elements of the menu item associated with the specified linkElement .
isItemSubShown(linkElement) Checks if the submenu of the menu item associated with the specified linkElement is currently shown.
isItemParentShown(linkElement) Determines if the parent item of the menu item associated with the specified linkElement is shown.
isItemDropdownPermanent(linkElement) Checks if the dropdown of the menu item associated with the specified linkElement is set to permanent.
hideAccordions(itemElement) Hides all accordion submenus of the menu item associated with itemElement DOM element.
disable() Disables the menu submenu toggle functionality.
update() Updates and re-enables the menu submenu toggle functionality if it was previously disabled.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTMenu instance.
getElement() Retrieves the DOM element linked to a specific KTMenu instance.
on(eventName, handler) Allows attaching event listeners to the KTMenu custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTMenu. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId) Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose() Removes the KTMenu instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const menuEl = document.querySelector('#my_menu');
const menuItemEl = document.querySelector('#my_menu_item_1');

const menu = KTMenu.getInstance(menuEl);

menu.show(menuItemEl);
menu.hide(menuItemEl);

Events

KTMenu custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
Event Description
link.click Fires before a menu link is clicked and the action is processed.
link.clicked Fires after a menu link is clicked and the action is processed.
dropdown.show Triggers before a dropdown menu is shown.
dropdown.shown Triggers after a dropdown menu is fully displayed.
dropdown.hide Fires before a dropdown menu starts the hiding process.
dropdown.hidden Fires after a dropdown menu is completely hidden.
accordion.show Triggers before an accordion menu item expands.
accordion.shown Triggers after an accordion menu item has fully expanded.
accordion.hide Fires before an accordion menu item starts to collapse.
accordion.hidden Fires after an accordion menu item has fully collapsed. 
				
					const menuEl = document.querySelector('#my_menu');
const menu = KTMenu.getInstance(menuEl);

menu.on('dropdown.show', () => {
	console.log('dropdown show event');
});

menu.on('dropdown.shown', () => {
	console.log('dropdown shown event');
});

menu.on('dropdown.hide', (detail) => {
	detail.cancel = true;
	console.log('dropdown hide action canceled');
});
Previous Tooltip Next Pagination