Tailwind CSS Menu

Class Name	Type	Description
menu	Component	Base class for menu container.
menu-title	Part	Base class for menu title.
menu-disabled	State	Makes menu item (`li`) disabled.
menu-active	State	Makes element inside menu item (`li`) active.
menu-xs	Size	Extra small size.
menu-sm	Size	Small size.
menu-md	Size	Medium(default) size.
menu-lg	Size	Large size.
menu-xl	Size	Extra-Large size.
menu-vertical	Direction	Vertical menu (default).
menu-horizontal	Direction	Horizontal menu.

Basic example

Default

Below example shows default menu component.

Variants

Below example shows menu with icons.

<ul class="menu">
  <li>
    <a href="#">
      <span class="icon-[tabler--home] size-5"></span>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--user] size-5"></span>
      Account
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--message] size-5"></span>
      Notifications
    </a>
  </li>
</ul>

With icons only

Below example shows menu with icons only.

<ul class="menu">
  <li>
    <a href="#" aria-label="Home Link"><span class="icon-[tabler--home] size-5"></span></a>
  </li>
  <li>
    <a href="#" aria-label="User Link"><span class="icon-[tabler--user] size-5"></span></a>
  </li>
  <li>
    <a href="#" aria-label="Message Link"><span class="icon-[tabler--message] size-5"></span></a>
  </li>
</ul>

With icons only (horizontal)

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="#" aria-label="Home Link"><span class="icon-[tabler--home] size-5"></span></a>
  </li>
  <li>
    <a href="#" aria-label="User Link"><span class="icon-[tabler--user] size-5"></span></a>
  </li>
  <li>
    <a href="#" aria-label="Message Link"><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="#" class="tooltip-toggle" aria-label="Home Link"><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="#" class="tooltip-toggle" aria-label="User Link"><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="#" class="tooltip-toggle" aria-label="Message Link"><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>

With disabled items

Below example shows menu with disabled items.

<ul class="menu">
  <li>
    <a href="#">
      <span class="icon-[tabler--home] size-5"></span>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--settings] size-5"></span>
      Settings
    </a>
  </li>
  <li class="menu-disabled">
    <a href="#">
      <span class="icon-[tabler--lock] size-5"></span>
      Security
    </a>
  </li>
</ul>

With badges

Below example shows menu with badges.

<ul class="menu lg:menu-horizontal">
  <li>
    <a href="#">
      <span class="icon-[tabler--mail] size-5"></span>
      Inbox
      <span class="badge badge-sm badge-primary">1K+</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--info-circle] size-5"></span>
      Updates
      <span class="badge badge-sm badge-warning">NEW</span>
    </a>
  </li>
  <li>
    <a href="#">

      Status
      <span class="badge badge-success size-3 p-0"></span>
    </a>

  </li>
</ul>

With active item

Below example shows menu with active item.

<ul class="menu">
  <li>
    <a href="#" class="menu-active">
      <span class="icon-[tabler--home] size-5"></span>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--user] size-5"></span>
      Account
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--message] size-5"></span>
      Notifications
    </a>
  </li>
</ul>

Sizes

Basic sizes

Utilize the responsive class menu-{size} where size = xs|sm|md|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="#">Home</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Notifications</a></li>
</ul>
<ul class="menu menu-sm w-fit">
  <li><a href="#">Home</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Notifications</a></li>
</ul>
<ul class="menu menu-md w-fit">
  <li><a href="#">Home</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Notifications</a></li>
</ul>
<ul class="menu menu-lg w-fit">
  <li><a href="#">Home</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Notifications</a></li>
</ul>
<ul class="menu menu-xl w-fit">
  <li><a href="#">Home</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Notifications</a></li>
</ul>

Illustrations

Simple

Below example shows simple menu without rounded borders & padding.

With title

Below example shows menu with title.

<ul class="menu">
  <li class="menu-title">Apps</li>
  <li>
    <a href="#">
      <span class="icon-[tabler--message] size-5"></span>
      Chat
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--calendar] size-5"></span>
      Calendar
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--book] size-5"></span>
      Academy
    </a>
  </li>
</ul>

With title as parent

Below example shows menu with title as parent.

<ul class="menu">
  <li>
    <p class="menu-title">Apps</p>
    <ul>
      <li>
        <a href="#">
          <span class="icon-[tabler--message] size-5"></span>
          Chat
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--calendar] size-5"></span>
          Calendar
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--book] size-5"></span>
          Academy
        </a>
      </li>
    </ul>
  </li>
</ul>

With sub-menus

Below example shows menu with sub-menus.

<ul class="menu">
  <li>
    <a href="#">
      <span class="icon-[tabler--home] size-5"></span>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--apps] size-5"></span>
      Apps
    </a>
    <ul class="menu">
      <li>
        <a href="#">
          <span class="icon-[tabler--message] size-5"></span>
          Chat
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--calendar] size-5"></span>
          Calendar
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--book] size-5"></span>
          Academy
        </a>
        <ul class="menu">
          <li>
            <a href="#">
              <span class="icon-[tabler--books] size-5"></span>
              Courses
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--list-details] size-5"></span>
              Course details
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--settings] size-5"></span>
      Settings
    </a>
  </li>
</ul>

With collapsible sub-menus

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">
  <li>
    <a href="#">
      <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 space-y-0.5 overflow-hidden transition-[height] duration-300" aria-labelledby="menu-app" >
      <li>
        <a href="#">
          <span class="icon-[tabler--message] size-5"></span>
          Chat
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--calendar] size-5"></span>
          Calendar
        </a>
      </li>
      <li class="space-y-0.5">
        <a class="collapse-toggle collapse-open:bg-base-content/10 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-open:rotate-180 size-4"></span>
        </a>
        <ul id="sub-menu-academy-collapse" class="open collapse w-auto space-y-0.5 overflow-hidden transition-[height] duration-300" aria-labelledby="sub-menu-academy" >
          <li>
            <a href="#">
              <span class="icon-[tabler--books] size-5"></span>
              Courses
            </a>
          </li>
          <li>
            <a href="#">
              <span class="icon-[tabler--list-details] size-5"></span>
              Course details
            </a>
          </li>
          <li class="space-y-0.5">
            <a class="collapse-toggle collapse-open:bg-base-content/10 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-open:rotate-180 size-4"></span>
            </a>
            <ul id="sub-menu-academy-stats-collapse" class="open collapse w-auto space-y-0.5 overflow-hidden transition-[height] duration-300" aria-labelledby="sub-menu-academy-stats" >
              <li>
                <a href="#">
                  <span class="icon-[tabler--chart-donut] size-5"></span>
                  Goals
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <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="#">
      <span class="icon-[tabler--home] size-5"></span>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon-[tabler--apps] size-5"></span>
      Apps
    </a>
    <ul class="menu">
      <li>
        <a href="#">
          <span class="icon-[tabler--message] size-5"></span>
          Chat
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--calendar] size-5"></span>
          Calendar
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon-[tabler--book] size-5"></span>
          Academy
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <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>
    <span class="menu-title">Services</span>
    <ul class="menu">
      <li><a href="#">Design Solutions</a></li>
      <li><a href="#">Software Development</a></li>
      <li><a href="#">Web Hosting</a></li>
      <li><a href="#">Domain Registration</a></li>
    </ul>
  </li>
  <li>
    <span class="menu-title">Corporate Solutions</span>
    <ul class="menu">
      <li><a href="#">CRM</a></li>
      <li><a href="#">Management Solutions</a></li>
      <li><a href="#">Security Services</a></li>
      <li><a href="#">Consulting Services</a></li>
    </ul>
  </li>
  <li>
    <span class="menu-title">Product Offerings</span>
    <ul class="menu">
      <li><a href="#">UI Kits</a></li>
      <li><a href="#">Component Library</a></li>
      <li><a href="#">WordPress Plugins</a></li>
      <li>
        <span class="menu-title">Open Source Projects</span>
        <ul class="menu">
          <li><a href="#">Authentication System</a></li>
          <li><a href="#">FlyonUI Theme</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span class="menu-title">Company</span>
    <ul class="menu">
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="#">Privacy policy</a></li>
      <li><a href="#">Careers</a></li>
    </ul>
  </li>
</ul>

Below example shows menu with dropdown.

<ul class="menu menu-horizontal space-x-0.5">
  <li><a href="#">Home</a></li>
  <li><a href="#">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="#">UI kits</a></li>
      <li><a class="dropdown-item" href="#">Templates</a></li>
      <li><a class="dropdown-item" href="#">Component library</a></li>
      <hr class="border-base-content/25 -mx-2 my-3" />
      <li><a class="dropdown-item" href="#">Figma designs</a></li>
    </ul>
  </li>
</ul>

FlyonUI