Phoenix + DaisyUI

Menu Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item><a>Item 1</a></:item>
  <:item><a>Item 2</a></:item>
  <:item><a>Item 3</a></:item>
</.menu>

Menu responsive Open in playground

<.menu class="lg:menu-horizontal bg-base-200 rounded-box" direction="vertical">
  <:item><a>Item 1</a></:item>
  <:item><a>Item 2</a></:item>
  <:item><a>Item 3</a></:item>
</.menu>

Menu with icon only Open in playground

<.menu class="bg-base-200 rounded-box" direction="horizontal">
  <:item><a><.icon name="hero-home" /></a></:item>
  <:item><a><.icon name="hero-exclamation-circle" /></a></:item>
  <:item><a><.icon name="hero-chart-bar" /></a></:item>
</.menu>
<.menu class="bg-base-200 rounded-box" direction="vertical">
  <:item><a><.icon name="hero-home" /></a></:item>
  <:item><a><.icon name="hero-exclamation-circle" /></a></:item>
  <:item><a><.icon name="hero-chart-bar" /></a></:item>
</.menu>

Menu with icon only and tooltip Open in playground

<.menu class="bg-base-200 rounded-box" direction="horizontal">
  <:item><a class="tooltip" data-tip="Home"><.icon name="hero-home" /></a></:item>
  <:item><a class="tooltip" data-tip="Details"><.icon name="hero-exclamation-circle" /></a></:item>
  <:item><a class="tooltip" data-tip="Stats"><.icon name="hero-chart-bar" /></a></:item>
</.menu>
<.menu class="bg-base-200 rounded-box" direction="vertical">
  <:item><a class="tooltip" data-tip="Home"><.icon name="hero-home" /></a></:item>
  <:item><a class="tooltip" data-tip="Details"><.icon name="hero-exclamation-circle" /></a></:item>
  <:item><a class="tooltip" data-tip="Stats"><.icon name="hero-chart-bar" /></a></:item>
</.menu>

Menu sizes Open in playground

<.menu class="bg-base-200 rounded-box w-56" size="xs">
  <:item><a>xs item 1</a></:item>
  <:item><a>xs item 2</a></:item>
</.menu>
<.menu class="bg-base-200 rounded-box w-56" size="sm">
  <:item><a>sm item 1</a></:item>
  <:item><a>sm item 2</a></:item>
</.menu>
<.menu class="bg-base-200 rounded-box w-56" size="md">
  <:item><a>md item 1</a></:item>
  <:item><a>md item 2</a></:item>
</.menu>
<.menu class="bg-base-200 rounded-box w-56" size="lg">
  <:item><a>lg item 1</a></:item>
  <:item><a>lg item 2</a></:item>
</.menu>

Menu with disabled items Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item><a>Enabled item</a></:item>
  <:item class="disabled"><a>disabled item</a></:item>
  <:item class="disabled"><a>disabled item</a></:item>
</.menu>

Menu with icon Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item><a><.icon name="hero-home" /> Item 1 </a></:item>
  <:item><a><.icon name="hero-exclamation-circle" /> Item 2 </a></:item>
  <:item><a><.icon name="hero-chart-bar" /> Item 3 </a></:item>
</.menu>

Menu with title Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item class="menu-title">Title</:item>
  <:item><a>Item 1</a></:item>
  <:item><a>Item 2</a></:item>
  <:item><a>Item 3</a></:item>
</.menu>

Menu with title as parent Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item>
    <h2 class="menu-title">Title</h2>
    <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
      <li><a>Item 3</a></li>
    </ul>
  </:item>
</.menu>

Submenu Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item><a>Item 1</a></:item>
  <:item>
    <ul>
      <li><a>Submenu 1</a></li>
      <li><a>Submenu 2</a></li>
      <li>
        <a>Parent</a>
        <ul>
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </li>
    </ul>
  </:item>
  <:item><a>Item 3</a></:item>
</.menu>

Collapse submenu Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item><a>Item 1</a></:item>
  <:item>
    <details open>
      <summary>Parent</summary>
      <ul>
        <li><a>Submenu 1</a></li>
        <li><a>Submenu 2</a></li>
        <li>
          <details open>
            <summary>Parent</summary>
            <ul>
              <li><a>Submenu 1</a></li>
              <li><a>Submenu 2</a></li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </:item>
  <:item><a>Item 3</a></:item>
</.menu>

Menu with active item Open in playground

<.menu class="bg-base-200 rounded-box w-56">
  <:item><a>Item 1</a></:item>
  <:item><a class="active">Item 2</a></:item>
  <:item><a>Item 3</a></:item>
</.menu>

Collapsible with submenu Open in playground

<.menu class="lg:menu-horizontal bg-base-200 rounded-box lg:mb-64">
  <:item><a>Item 1</a></:item>
  <:item>
    <details open>
      <summary>Parent item</summary>
      <ul>
        <li><a>Submenu 1</a></li>
        <li><a>Submenu 2</a></li>
        <li>
          <details open>
            <summary>Parent</summary>
            <ul>
              <li><a>item 1</a></li>
              <li><a>item 2</a></li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </:item>
  <:item><a>Item 3</a></:item>
</.menu>