navigations
Tailwind CSS Menu
The menu serves to present a vertical or horizontal list of links.
Class Name | Type | Description |
|---|---|---|
| menu | Component | Base class for menu container. |
| menu-title | Component | Base class for menu title. |
| disabled | Modifier | Makes menu item (li) disabled. |
| active | Modifier | Makes menu item (li) active. |
| menu-xs | Responsive | Extra small size. |
| menu-sm | Responsive | Small size. |
| menu-lg | Responsive | Large size. |
| menu-vertical | Responsive | Vertical menu (default). |
| menu-horizontal | Responsive | Horizontal menu. |
Below example shows default menu component.
<ul class="menu">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Account</a></li>
<li><a href="javascript:void(0)">Notifications</a></li>
</ul>Below example shows menu with icons.
<ul class="menu">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--home] size-5"></span>
Home
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--user] size-5"></span>
Account
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--message] size-5"></span>
Notifications
</a>
</li>
</ul>Below example shows menu with icons only.
<ul class="menu">
<li>
<a href="javascript:void(0)"><span class="icon-[tabler--home] size-5"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="icon-[tabler--user] size-5"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="icon-[tabler--message] size-5"></span></a>
</li>
</ul>Use the responsive class menu-horizontal with the component class menu for a horizontal menu.
Below example shows menu with icons only.
<ul class="menu menu-horizontal">
<li>
<a href="javascript:void(0)"><span class="icon-[tabler--home] size-5"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="icon-[tabler--user] size-5"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="icon-[tabler--message] size-5"></span></a>
</li>
</ul>Below example shows menu with tooltip.
<ul class="menu">
<li class="tooltip [--placement:right]">
<a href="javascript:void(0)" class="tooltip-toggle"><span class="icon-[tabler--home] size-5"></span></a>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Home</span>
</span>
</li>
<li class="tooltip [--placement:right]">
<a href="javascript:void(0)" class="tooltip-toggle"><span class="icon-[tabler--user] size-5"></span></a>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Account</span>
</span>
</li>
<li class="tooltip [--placement:right]">
<a href="javascript:void(0)" class="tooltip-toggle"><span class="icon-[tabler--message] size-5"></span></a>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Notifications</span>
</span>
</li>
</ul>Below example shows menu with disabled items.
<ul class="menu">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--home] size-5"></span>
Home
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--settings] size-5"></span>
Settings
</a>
</li>
<li class="disabled">
<a href="javascript:void(0)">
<span class="icon-[tabler--lock] size-5"></span>
Security
</a>
</li>
</ul>Below example shows menu with badges.
<ul class="menu lg:menu-horizontal">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--mail] size-5"></span>
Inbox
<span class="badge badge-sm badge-primary">1K+</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--info-circle] size-5"></span>
Updates
<span class="badge badge-sm badge-warning">NEW</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
Status
<span class="badge badge-success size-3 p-0"></span>
</a>
</li>
</ul>Below example shows menu with active item.
<ul class="menu">
<li>
<a class="active">
<span class="icon-[tabler--home] size-5"></span>
Home
</a>
</li>
<li>
<a>
<span class="icon-[tabler--user] size-5"></span>
Account
</a>
</li>
<li>
<a>
<span class="icon-[tabler--message] size-5"></span>
Notifications
</a>
</li>
</ul>Utilize the responsive class menu-{size} where size = xs|sm|lg|xl to render menus of varying sizes.
The following example demonstrates menus with different sizes.
<ul class="menu menu-xs w-fit">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Account</a></li>
<li><a href="javascript:void(0)">Notifications</a></li>
</ul>
<ul class="menu menu-sm w-fit">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Account</a></li>
<li><a href="javascript:void(0)">Notifications</a></li>
</ul>
<ul class="menu w-fit">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Account</a></li>
<li><a href="javascript:void(0)">Notifications</a></li>
</ul>
<ul class="menu menu-lg w-fit">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Account</a></li>
<li><a href="javascript:void(0)">Notifications</a></li>
</ul>Below example shows simple menu without rounded borders & padding.
<ul class="menu rounded-none p-0 [&_li>*]:rounded-none">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Account</a></li>
<li><a href="javascript:void(0)">Notifications</a></li>
</ul>Below example shows menu with title.
<ul class="menu">
<li class="menu-title">Apps</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--message] size-5"></span>
Chat
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--calendar] size-5"></span>
Calendar
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--book] size-5"></span>
Academy
</a>
</li>
</ul>Below example shows menu with title as parent.
<ul class="menu">
<li>
<p class="menu-title">Apps</p>
<ul>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--message] size-5"></span>
Chat
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--calendar] size-5"></span>
Calendar
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--book] size-5"></span>
Academy
</a>
</li>
</ul>
</li>
</ul>Below example shows menu with sub-menus.
<ul class="menu">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--home] size-5"></span>
Home
</a>
</li>
<li>
<a>
<span class="icon-[tabler--apps] size-5"></span>
Apps
</a>
<ul class="menu">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--message] size-5"></span>
Chat
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--calendar] size-5"></span>
Calendar
</a>
</li>
<li>
<a>
<span class="icon-[tabler--book] size-5"></span>
Academy
</a>
<ul class="menu">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--books] size-5"></span>
Courses
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--list-details] size-5"></span>
Course details
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--settings] size-5"></span>
Settings
</a>
</li>
</ul>Below example shows menu with collapsible sub-menus.
This example uses collapse to achieve this. Refer to the Collapse component for more details.
<ul class="menu w-64 space-y-0.5 [&_.nested-collapse-wrapper]:space-y-0.5 [&_ul]:space-y-0.5">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--home] size-5"></span>
Home
</a>
</li>
<li class="space-y-0.5">
<a class="collapse-toggle collapse-open:bg-base-content/10 open" id="menu-app" data-collapse="#menu-app-collapse">
<span class="icon-[tabler--apps] size-5"></span>
Apps
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4 transition-all duration-300"></span>
</a>
<ul id="menu-app-collapse" class="open collapse w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="menu-app">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--message] size-5"></span>
Chat
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--calendar] size-5"></span>
Calendar
</a>
</li>
<li class="nested-collapse-wrapper">
<a class="collapse-toggle nested-collapse open" id="sub-menu-academy" data-collapse="#sub-menu-academy-collapse">
<span class="icon-[tabler--book] size-5"></span>
Academy
<span class="icon-[tabler--chevron-down] collapse-icon size-4"></span>
</a>
<ul id="sub-menu-academy-collapse" class="open collapse w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="sub-menu-academy">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--books] size-5"></span>
Courses
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--list-details] size-5"></span>
Course details
</a>
</li>
<li class="nested-collapse-wrapper">
<a class="collapse-toggle nested-collapse open" id="sub-menu-academy-stats" data-collapse="#sub-menu-academy-stats-collapse">
<span class="icon-[tabler--chart-bar] size-5"></span>
Stats
<span class="icon-[tabler--chevron-down] collapse-icon size-4"></span>
</a>
<ul id="sub-menu-academy-stats-collapse" class="open collapse w-auto overflow-hidden transition-[height] duration-300" aria-labelledby="sub-menu-academy-stats">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--chart-donut] size-5"></span>
Goals
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--settings] size-5"></span>
Settings
</a>
</li>
</ul>Below example shows horizontal menu with sub-menu.
<ul class="menu sm:menu-horizontal">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--home] size-5"></span>
Home
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--apps] size-5"></span>
Apps
</a>
<ul class="menu">
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--message] size-5"></span>
Chat
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--calendar] size-5"></span>
Calendar
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--book] size-5"></span>
Academy
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">
<span class="icon-[tabler--settings] size-5"></span>
Settings
</a>
</li>
</ul>Below example shows mega menu with sub-menu.
<ul class="menu sm:menu-horizontal">
<li>
<a class="menu-title">Services</a>
<ul class="menu">
<li><a href="javascript:void(0)">Design Solutions</a></li>
<li><a href="javascript:void(0)">Software Development</a></li>
<li><a href="javascript:void(0)">Web Hosting</a></li>
<li><a href="javascript:void(0)">Domain Registration</a></li>
</ul>
</li>
<li>
<a class="menu-title">Corporate Solutions</a>
<ul class="menu">
<li><a href="javascript:void(0)">CRM</a></li>
<li><a href="javascript:void(0)">Management Solutions</a></li>
<li><a href="javascript:void(0)">Security Services</a></li>
<li><a href="javascript:void(0)">Consulting Services</a></li>
</ul>
</li>
<li>
<a class="menu-title">Product Offerings</a>
<ul class="menu">
<li><a href="javascript:void(0)">UI Kits</a></li>
<li><a href="javascript:void(0)">Component Library</a></li>
<li><a href="javascript:void(0)">WordPress Plugins</a></li>
<li>
<a class="menu-title">Open Source Projects</a>
<ul class="menu">
<li><a href="javascript:void(0)">Authentication System</a></li>
<li><a href="javascript:void(0)">Flyon Theme</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a class="menu-title">Company</a>
<ul class="menu">
<li><a href="javascript:void(0)">About us</a></li>
<li><a href="javascript:void(0)">Contact us</a></li>
<li><a href="javascript:void(0)">Privacy policy</a></li>
<li><a href="javascript:void(0)">Careers</a></li>
</ul>
</li>
</ul>Below example shows menu with dropdown.
<ul class="menu menu-horizontal space-x-0.5 rtl:space-x-reverse">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Services</a></li>
<li class="dropdown relative inline-flex [--auto-close:inside] [--offset:9] [--placement:bottom-end]">
<button id="dropdown-end" type="button" class="dropdown-toggle dropdown-open:bg-base-content/10 dropdown-open:text-base-content max-sm:px-2" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Products
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<ul class="dropdown-menu dropdown-open:opacity-100 hidden" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-end">
<li><a class="dropdown-item" href="javascript:void(0)">UI kits</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Templates</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Component library</a></li>
<hr class="border-base-content/25 -mx-2 my-3" />
<li><a class="dropdown-item" href="javascript:void(0)">Figma designs</a></li>
</ul>
</li>
</ul>
