Phoenix + DaisyUI

Navbar

Attribute Type Documentation Default Value
class :any
rest :global
navbar_start :slot
Show slot attributes Hide slot attributes
class :any 
<:navbar_start>
  <.dropdown>
    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
      <.icon name="hero-bars-3-bottom-right" />
    </div>
    <.menu tabindex="0" size="sm" class="dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
      <:item><a>Item 1</a></:item>
      <:item>
        <a>Parent</a>
        <ul class="p-2">
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </:item>
      <:item><a>Item 3</a></:item>
    </.menu>
  </.dropdown>
  <a class="btn btn-ghost text-xl">daisyUI</a>
</:navbar_start>
<:navbar_center class="hidden lg:flex">
  <.menu direction="horizontal" class="px-1">
    <:item><a>Item 1</a></:item>
    <:item>
      <details>
        <summary>Parent</summary>
        <ul class="p-2 bg-base-100 w-40">
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </details>
    </:item>
    <:item><a>Item 3</a></:item>
  </.menu>
</:navbar_center>
<:navbar_end>
  <a class="btn">Button</a>
</:navbar_end>
navbar_center :slot
Show slot attributes Hide slot attributes
class :any 
<:navbar_start>
  <.dropdown>
    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
      <.icon name="hero-bars-3-bottom-right" />
    </div>
    <.menu tabindex="0" size="sm" class="dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
      <:item><a>Item 1</a></:item>
      <:item>
        <a>Parent</a>
        <ul class="p-2">
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </:item>
      <:item><a>Item 3</a></:item>
    </.menu>
  </.dropdown>
  <a class="btn btn-ghost text-xl">daisyUI</a>
</:navbar_start>
<:navbar_center class="hidden lg:flex">
  <.menu direction="horizontal" class="px-1">
    <:item><a>Item 1</a></:item>
    <:item>
      <details>
        <summary>Parent</summary>
        <ul class="p-2 bg-base-100 w-40">
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </details>
    </:item>
    <:item><a>Item 3</a></:item>
  </.menu>
</:navbar_center>
<:navbar_end>
  <a class="btn">Button</a>
</:navbar_end>
navbar_end :slot
Show slot attributes Hide slot attributes
class :any 
<:navbar_start>
  <.dropdown>
    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
      <.icon name="hero-bars-3-bottom-right" />
    </div>
    <.menu tabindex="0" size="sm" class="dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
      <:item><a>Item 1</a></:item>
      <:item>
        <a>Parent</a>
        <ul class="p-2">
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </:item>
      <:item><a>Item 3</a></:item>
    </.menu>
  </.dropdown>
  <a class="btn btn-ghost text-xl">daisyUI</a>
</:navbar_start>
<:navbar_center class="hidden lg:flex">
  <.menu direction="horizontal" class="px-1">
    <:item><a>Item 1</a></:item>
    <:item>
      <details>
        <summary>Parent</summary>
        <ul class="p-2 bg-base-100 w-40">
          <li><a>Submenu 1</a></li>
          <li><a>Submenu 2</a></li>
        </ul>
      </details>
    </:item>
    <:item><a>Item 3</a></:item>
  </.menu>
</:navbar_center>
<:navbar_end>
  <a class="btn">Button</a>
</:navbar_end>
inner_block :slot