email-organizer/offline-docs/daisyui/menu.md

daisyUI Documentation - Menu Component

Menu is a vertical list of links or buttons.

Classes and Usage

Core Classes:

• menu - The main menu component
• menu-title - Title for menu sections
• menu-item - Individual menu item
• menu-horizontal - Horizontal layout
• menu-vertical - Vertical layout (default)
• menu-sm - Small size
• menu-md - Medium size [Default]
• menu-lg - Large size
• menu-xs - Extra small size

Examples

Basic Menu

<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
  <li>
    <a>Menu Item 1</a>
  </li>
  <li>
    <a>Menu Item 2</a>
  </li>
  <li>
    <a>Menu Item 3</a>
  </li>
</ul>

Menu with Icons

<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
  <li>
    <a>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
      </svg>
      Home
    </a>
  </li>
  <li>
    <a>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
      </svg>
      Profile
    </a>
  </li>
</ul>

Horizontal Menu

<ul class="menu menu-horizontal bg-base-200 text-base-content rounded-box">
  <li>
    <a>Home</a>
  </li>
  <li>
    <a>Profile</a>
  </li>
  <li>
    <a>Settings</a>
  </li>
</ul>

Menu with Title

<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
  <li>
    <h2 class="menu-title">Main Navigation</h2>
  </li>
  <li>
    <a>Dashboard</a>
  </li>
  <li>
    <a>Profile</a>
  </li>
</ul>

Menu with Active State

<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
  <li>
    <a class="active">Active Item</a>
  </li>
  <li>
    <a>Normal Item</a>
  </li>
</ul>

Features

• Vertical list of links or buttons
• Horizontal or vertical layout options
• Multiple size options (xs, sm, md, lg)
• Title support for menu sections
• Active state support
• Works with icons

This component is useful for creating navigation menus, sidebars, or any vertical list of interactive items.