Navbar

Navbar is used to show a navigation bar on the top of the page.

Class name
Type
navbar
Component
Navigation bar
navbar-start
Part
For the div inside navbar, to fill 50% of width
navbar-center
Part
For the div inside navbar, to be at center horizontally
navbar-end
Part
For the div inside navbar, to fill second 50% of width

responsive (dropdown menu on small screen, center menu on large screen)

Resize screen to see changes
<div class="$$navbar bg-base-100 shadow-sm">
  <div class="$$navbar-start">
    <div class="$$dropdown">
      <div tabindex="0" role="button" class="$$btn $$btn-ghost lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
      </div>
      <ul
        tabindex="0"
        class="$$menu $$menu-sm $$dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a class="$$btn $$btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="$$navbar-center hidden lg:flex">
    <ul class="$$menu $$menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div class="$$navbar-end">
    <a class="$$btn">Button</a>
  </div>
</div>
<div class="$$navbar bg-base-100 shadow-sm">
  <div class="$$navbar-start">
    <div class="$$dropdown">
      <div tabindex="0" role="button" class="$$btn $$btn-ghost lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
      </div>
      <ul
        tabindex="0"
        class="$$menu $$menu-sm $$dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a class="$$btn $$btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="$$navbar-center hidden lg:flex">
    <ul class="$$menu $$menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div class="$$navbar-end">
    <a class="$$btn">Button</a>
  </div>
</div>
Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details