Starting Point
v0.39.0

Search documentation

Search for a page and jump to it.

Start typing to search...
Go to Page
escClose
Getting Started
IntroductionInstallationCustomizationRTLInline EventsHelpChangelogDiscord
Resources
AvatarsUnsplash Editor
Components
AccordionAction BarAlertAvatarBadgeBrandBreadcrumbBubbleButtonButton GroupCalendarCardCarouselCheckboxCollapsibleComboboxCommandContext MenuDate PickerDialogDrawerDropdownEmptyFieldFormsInputInput GroupItemKbdLabelMarkerMessageMessage ScrollerNavbarPaginationPopoverProgressRadio GroupResizableScroll FadeScrollbarSelectSeparatorSheetShimmerSidebarSkeletonSliderSwitchTableTabsTextareaToastTooltip
Examples
CardsDialogsDropdownsTables

Tailwind CSS Navbar

Use the navbar component to put your brand, links and actions across the top of a page, like a site header with a mega menu or the header of a dashboard. For a vertical menu, use a sidebar.

<header class="navbar">
  <div class="mx-auto flex w-full max-w-7xl items-center gap-2">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-name">Acme Inc.</span>
    </a>
    <button id="navbar-demo-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-demo-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <button id="navbar-demo-products" class="navbar-link">
          Products
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="navbar-content" data-sp-toggle="#navbar-demo-products">
          <div class="grid w-sm grid-cols-2 gap-2">
            <div>
              <a href="#" class="navbar-link">Platform</a>
              <a href="#" class="navbar-link">Voice agents</a>
              <a href="#" class="navbar-link">Chat agents</a>
            </div>
            <div>
              <a href="#" class="navbar-link">Analytics</a>
              <a href="#" class="navbar-link">Integrations</a>
            </div>
          </div>
        </div>
        <button id="navbar-demo-solutions" class="navbar-link">
          Solutions
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="navbar-content" data-sp-toggle="#navbar-demo-solutions">
          <div class="grid w-xl grid-cols-3 gap-2">
            <div>
              <div class="navbar-label">Industries</div>
              <a href="#" class="navbar-link">Telecommunications</a>
              <a href="#" class="navbar-link">Financial services</a>
              <a href="#" class="navbar-link">Healthcare</a>
              <a href="#" class="navbar-link">Retail and e-commerce</a>
            </div>
            <div>
              <div class="navbar-label">Use cases</div>
              <a href="#" class="navbar-link">Customer support</a>
              <a href="#" class="navbar-link">Lead qualification</a>
              <a href="#" class="navbar-link">Outbound</a>
            </div>
            <div>
              <div class="navbar-label">Company size</div>
              <a href="#" class="navbar-link">Enterprise</a>
              <a href="#" class="navbar-link">Startups</a>
            </div>
          </div>
        </div>
        <a href="#" class="navbar-link">Customers</a>
        <button id="navbar-demo-resources" class="navbar-link">
          Resources
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="navbar-content" data-sp-toggle="#navbar-demo-resources">
          <div class="grid w-md grid-cols-2 gap-2">
            <div>
              <a href="#" class="navbar-link">
                Blog
                <span class="navbar-link-description">Product news and stories</span>
              </a>
              <a href="#" class="navbar-link">
                Documentation
                <span class="navbar-link-description">Guides and API reference</span>
              </a>
            </div>
            <div>
              <a href="#" class="navbar-link">
                Changelog
                <span class="navbar-link-description">Recent features and fixes</span>
              </a>
              <a href="#" class="navbar-link">
                Help center
                <span class="navbar-link-description">Answers to common questions</span>
              </a>
            </div>
          </div>
        </div>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </div>
</header>
<div class="mx-4 mb-4 flex-1 rounded-xl bg-muted/50"></div>

Usage

Add the navbar class to a <header> element and fill it with what your site needs: your logo in a brand, the links in a navbar-nav, each with navbar-link and active on the current page, and the buttons in a navbar-actions group. Wrap any logo in a brand, whether an image or your own svg, so the drawer can show it at the top.

For a dropdown or a mega menu, put a navbar-content panel right after a navbar-link button and point it at the button with data-sp-toggle. Fill it with navbar-link rows and add a navbar-link-description inside a row for a line under its title. For a mega menu, lay the rows out in columns with a grid inside the panel, and start a column with a navbar-label to name it.

To fold the menu away on small screens, wrap the navbar-nav and the actions in a navbar-collapse, and point that at an empty navbar-toggle button with an aria-label. Below the md breakpoint, or your own --breakpoint-navbar, the wrapper becomes a drawer in the style of the sidebar, with each panel as a sub-menu that shows only the link titles. Leave the navbar-collapse out to keep the menu in the bar on every screen size, scrolling sideways when it runs out of room.

The bar has no border of its own. Add border-b for one. On a sticky bar, including a sticky overlay, it fades in once the page scrolls.

ClassDescription
navbarAdd to the <header> element
navbar-stickyAdd to navbar to keep it in view. It gets scrolled once content passes under it
navbar-overlayAdd to navbar to lay it see-through over a hero, with navbar-sticky to keep it in view
navbar-startAdd to navbar to place the menu after the brand, the default, for example at a breakpoint
navbar-centerAdd to navbar to center the menu on the bar, with any extra buttons inside navbar-actions
navbar-endAdd to navbar to move the menu next to the buttons at the end
navbar-smAdd to navbar for a shorter bar with smaller links
navbar-navAdd to the <nav> element holding the links
navbar-nav-lineAdd to navbar-nav for muted links and a line under the current one
navbar-linkAdd to each link or button, with active on the current page
navbar-link-descriptionAdd to a <span> inside a panel link for a line under its title
navbar-contentAdd to the panel, which carries data-sp-toggle
navbar-labelAdd to the heading of a column in a panel
navbar-collapseAdd to a wrapper around the links and the actions that folds on small screens
navbar-toggleAdd to the empty button that opens the drawer
navbar-actionsAdd to the group of buttons at the end of the bar
<header class="navbar">
  <a href="/" class="brand">...</a>
  <button id="menu-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto" aria-label="Toggle menu"></button>
  <div class="navbar-collapse" data-sp-toggle="#menu-toggle">
    <nav class="navbar-nav">
      <a href="#" class="navbar-link active">Home</a>
      <button id="products" class="navbar-link">Products ...</button>
      <div class="navbar-content" data-sp-toggle="#products">
        <div class="grid w-lg grid-cols-2 gap-2">
          <div>
            <div class="navbar-label">Platform</div>
            <a href="#" class="navbar-link">
              Analytics
              <span class="navbar-link-description">Dashboards and reports.</span>
            </a>
          </div>
          <div>...</div>
        </div>
      </div>
      <a href="#" class="navbar-link">Pricing</a>
    </nav>
    <div class="navbar-actions">...</div>
  </div>
</header>

Examples

App navbar

Give each icon button a hidden sr-only label to name it. With the actions after the navbar-collapse, they stay in the bar on small screens too.

<header class="navbar border-b">
  <a href="#" class="brand me-4">
    <span class="brand-logo"><i class="font-serif font-bold not-italic">A</i></span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <div class="navbar-collapse" data-sp-toggle="#navbar-app-toggle">
    <nav class="navbar-nav navbar-nav-line" aria-label="Main">
      <a href="#" class="navbar-link active"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>Home</a>
      <a href="#" class="navbar-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>Inbox <span class="badge badge-secondary">12</span></a>
      <a href="#" class="navbar-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>Documents</a>
      <button id="navbar-app-favorites" class="navbar-link">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
        Favorites
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-app-favorites">
        <a href="#" class="navbar-link">Q4 roadmap</a>
        <a href="#" class="navbar-link">Design reviews</a>
        <a href="#" class="navbar-link">Team handbook</a>
      </div>
    </nav>
  </div>
  <div class="navbar-actions gap-1">
    <button class="btn btn-ghost btn-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><span class="sr-only">Search</span></button>
    <button class="btn btn-ghost btn-icon"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="absolute -end-0.5 -top-0.5 size-2 rounded-full bg-red-500"></span></span><span class="sr-only">Notifications</span></button>
    <button id="navbar-app-user" class="btn btn-ghost btn-icon rounded-full">
      <span class="avatar"><img class="avatar-image" src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5" alt="Leila Navarro" /><span class="avatar-fallback">LN</span></span>
      <span class="sr-only"><span class="block font-medium">Leila Navarro</span><span class="block text-xs text-muted-foreground">[email protected]</span></span>
    </button>
    <div class="dropdown" data-sp-toggle="#navbar-app-user">
      <div class="dropdown-label">Leila Navarro</div>
      <button class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Profile</button>
      <button class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>Settings</button>
      <div class="dropdown-separator"></div>
      <button class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>Sign out</button>
    </div>
  </div>
  <button id="navbar-app-toggle" class="btn btn-ghost btn-icon navbar-toggle -me-2" aria-label="Toggle menu"></button>
</header>
<div class="m-4 flex-1 rounded-xl bg-muted/50"></div>

App navbar with actions in the drawer

Put the actions inside the navbar-collapse to move them into the drawer on small screens. There each icon button shows its sr-only label beside the icon as a row, and the avatar becomes a user row.

<header class="navbar border-b">
  <a href="#" class="brand me-4">
    <span class="brand-logo"><i class="font-serif font-bold not-italic">A</i></span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <button id="navbar-app-drawer-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
  <div class="navbar-collapse" data-sp-toggle="#navbar-app-drawer-toggle">
    <nav class="navbar-nav navbar-nav-line" aria-label="Main">
      <a href="#" class="navbar-link active"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>Home</a>
      <a href="#" class="navbar-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>Inbox <span class="badge badge-secondary">12</span></a>
      <a href="#" class="navbar-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>Documents</a>
      <button id="navbar-app-drawer-favorites" class="navbar-link">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>
        Favorites
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-app-drawer-favorites">
        <a href="#" class="navbar-link">Q4 roadmap</a>
        <a href="#" class="navbar-link">Design reviews</a>
        <a href="#" class="navbar-link">Team handbook</a>
      </div>
    </nav>
    <div class="navbar-actions gap-1">
      <button class="btn btn-ghost btn-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><span class="sr-only">Search</span></button>
      <button class="btn btn-ghost btn-icon"><span class="relative"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="absolute -end-0.5 -top-0.5 size-2 rounded-full bg-red-500"></span></span><span class="sr-only">Notifications</span></button>
      <button id="navbar-app-drawer-user" class="btn btn-ghost btn-icon rounded-full">
        <span class="avatar"><img class="avatar-image" src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5" alt="Leila Navarro" /><span class="avatar-fallback">LN</span></span>
        <span class="sr-only"><span class="block font-medium">Leila Navarro</span><span class="block text-xs text-muted-foreground">[email protected]</span></span>
      </button>
      <div class="dropdown" data-sp-toggle="#navbar-app-drawer-user">
        <div class="dropdown-label">Leila Navarro</div>
        <button class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Profile</button>
        <button class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>Settings</button>
        <div class="dropdown-separator"></div>
        <button class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></svg>Sign out</button>
      </div>
    </div>
  </div>
</header>
<div class="m-4 flex-1 rounded-xl bg-muted/50"></div>

Navbar alignment

By default the menu follows the brand and the buttons sit at the end. Add navbar-center to the bar to center the menu on it, whatever the width of the brand and the buttons, or navbar-end to move it next to the buttons. Prefix them with a breakpoint to change the layout from a screen size, like navbar-end xl:navbar-center, and use navbar-start to go back to the default.

<div class="flex flex-col gap-4">
  <header class="navbar">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-name">Acme Inc.</span>
    </a>
    <button id="navbar-start-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-start-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
  <header class="navbar navbar-center">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-name">Acme Inc.</span>
    </a>
    <button id="navbar-center-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-center-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
  <header class="navbar navbar-end">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-name">Acme Inc.</span>
    </a>
    <button id="navbar-end-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-end-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
</div>

Navbar with dropdown

Put a navbar-content panel right after its navbar-link button. Use a single column for a dropdown, or a grid of columns for a mega menu, with navbar-label headings and navbar-link-description lines as needed.

<header class="navbar">
  <a href="#" class="brand me-2">
    <span class="brand-logo">
      <i class="font-serif font-bold not-italic">A</i>
    </span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <button id="navbar-dropdown-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
  <div class="navbar-collapse" data-sp-toggle="#navbar-dropdown-toggle">
    <nav class="navbar-nav" aria-label="Main">
      <button id="navbar-dropdown-products" class="navbar-link">
        Products
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-dropdown-products">
        <div class="grid w-sm grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">Platform</a>
            <a href="#" class="navbar-link">Voice agents</a>
            <a href="#" class="navbar-link">Chat agents</a>
          </div>
          <div>
            <a href="#" class="navbar-link">Analytics</a>
            <a href="#" class="navbar-link">Integrations</a>
          </div>
        </div>
      </div>
      <button id="navbar-dropdown-solutions" class="navbar-link">
        Solutions
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-dropdown-solutions">
        <div class="grid w-xl grid-cols-3 gap-2">
          <div>
            <div class="navbar-label">Industries</div>
            <a href="#" class="navbar-link">Telecommunications</a>
            <a href="#" class="navbar-link">Financial services</a>
            <a href="#" class="navbar-link">Healthcare</a>
            <a href="#" class="navbar-link">Retail and e-commerce</a>
          </div>
          <div>
            <div class="navbar-label">Use cases</div>
            <a href="#" class="navbar-link">Customer support</a>
            <a href="#" class="navbar-link">Lead qualification</a>
            <a href="#" class="navbar-link">Outbound</a>
          </div>
          <div>
            <div class="navbar-label">Company size</div>
            <a href="#" class="navbar-link">Enterprise</a>
            <a href="#" class="navbar-link">Startups</a>
          </div>
        </div>
      </div>
      <a href="#" class="navbar-link">Customers</a>
      <button id="navbar-dropdown-resources" class="navbar-link">
        Resources
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-dropdown-resources">
        <div class="grid w-md grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">
              Blog
              <span class="navbar-link-description">Product news and stories</span>
            </a>
            <a href="#" class="navbar-link">
              Documentation
              <span class="navbar-link-description">Guides and API reference</span>
            </a>
          </div>
          <div>
            <a href="#" class="navbar-link">
              Changelog
              <span class="navbar-link-description">Recent features and fixes</span>
            </a>
            <a href="#" class="navbar-link">
              Help center
              <span class="navbar-link-description">Answers to common questions</span>
            </a>
          </div>
        </div>
      </div>
    </nav>
    <div class="navbar-actions">
      <a href="#" class="btn btn-outline">Log in</a>
      <a href="#" class="btn">Sign up</a>
    </div>
  </div>
</header>
<div class="mx-4 mb-4 flex-1 rounded-xl bg-muted/50"></div>

Sticky navbar

Add navbar-sticky to keep the bar in view as the page scrolls. A border-b on a sticky bar fades in once content scrolls under it.

<header class="navbar navbar-sticky border-b">
  <a href="#" class="brand me-2">
    <span class="brand-logo">
      <i class="font-serif font-bold not-italic">A</i>
    </span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <div class="navbar-collapse" data-sp-toggle="#navbar-sticky-toggle">
    <nav class="navbar-nav" aria-label="Main">
      <button id="navbar-sticky-products" class="navbar-link">
        Products
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-sticky-products">
        <div class="grid w-sm grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">Platform</a>
            <a href="#" class="navbar-link">Voice agents</a>
            <a href="#" class="navbar-link">Chat agents</a>
          </div>
          <div>
            <a href="#" class="navbar-link">Analytics</a>
            <a href="#" class="navbar-link">Integrations</a>
          </div>
        </div>
      </div>
      <a href="#" class="navbar-link">Customers</a>
      <a href="#" class="navbar-link">Pricing</a>
    </nav>
    <div class="navbar-actions ms-0 navbar:order-last">
      <a href="#" class="btn btn-outline">Log in</a>
      <a href="#" class="btn">Sign up</a>
    </div>
  </div>
  <button class="btn btn-ghost btn-icon ms-auto" aria-label="Toggle theme" onclick="document.documentElement.classList.toggle('dark')">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dark:hidden"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden dark:block"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
  </button>
  <button id="navbar-sticky-toggle" class="btn btn-ghost btn-icon navbar-toggle -me-2" aria-label="Toggle menu"></button>
</header>
<section class="flex h-[calc(100%-3.5rem)] shrink-0 flex-col items-center justify-center px-6 text-center">
  <div class="relative flex flex-col items-center">
    <a href="#" class="inline-flex items-center gap-2 rounded-full bg-foreground/5 py-1 ps-4 pe-1 text-sm font-medium backdrop-blur transition-colors hover:bg-foreground/10">
      New: Workflows 2.0 is here
      <span class="flex size-6 items-center justify-center rounded-full bg-foreground/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
    </a>
    <h1 class="mt-6 max-w-2xl text-4xl leading-[1.1] font-medium tracking-tight text-balance sm:text-5xl sm:leading-[1.1]">The platform that turns ideas into shipped products</h1>
    <p class="mt-6 max-w-xs text-muted-foreground">Plan, build and launch with your whole team, and ship every week.</p>
    <div class="mt-10 flex items-center gap-1.5">
      <a href="#" class="btn btn-lg h-12 rounded-full px-8">Get started</a>
      <a href="#" class="btn btn-ghost btn-icon size-12 rounded-full bg-foreground/10 backdrop-blur hover:bg-foreground/15" aria-label="Watch the demo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 fill-current"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg></a>
    </div>
  </div>
</section>
<div class="h-[100rem] shrink-0"></div>

Transparent navbar

Add navbar-overlay to lay the bar see-through over a hero, and navbar-sticky too to keep it in view. It turns solid once content scrolls under it, and a border-b fades in with it. Over a dark image on a light page, add dark to the bar. Its links and buttons then switch to the dark theme while it sits on the image, and its panels and the drawer keep the theme of the page. Leave out navbar-sticky to let the bar scroll away with the hero.

<style>
  .hero-sky {
    background:
      radial-gradient(260px 170px at 50% 102%, rgb(255 246 220 / 1), rgb(255 220 176 / 0.4) 55%, transparent 100%),
      radial-gradient(120% 52% at 50% 110%, rgb(252 184 156 / 0.55), rgb(238 176 204 / 0.25) 45%, transparent 75%),
      radial-gradient(45% 40% at 0% 88%, rgb(198 186 248 / 0.38), transparent 70%),
      radial-gradient(45% 40% at 100% 82%, rgb(168 204 248 / 0.4), transparent 70%),
      radial-gradient(90% 55% at 50% -15%, rgb(200 220 250 / 0.7), transparent 70%),
      linear-gradient(180deg, #f3f6fb 0%, #f6f6f9 42%, #f8efed 72%, #f7e3d8 100%);
  }
  .dark .hero-sky {
    background:
      radial-gradient(260px 170px at 50% 102%, rgb(255 214 170 / 0.7), rgb(255 170 130 / 0.2) 55%, transparent 100%),
      radial-gradient(120% 52% at 50% 110%, rgb(222 128 116 / 0.5), rgb(156 86 128 / 0.22) 45%, transparent 75%),
      radial-gradient(45% 40% at 0% 88%, rgb(116 96 182 / 0.28), transparent 70%),
      radial-gradient(45% 40% at 100% 82%, rgb(86 118 186 / 0.24), transparent 70%),
      radial-gradient(90% 55% at 50% -15%, rgb(74 94 146 / 0.32), transparent 70%),
      linear-gradient(180deg, #0e1016 0%, #161924 38%, #221e2c 68%, #3a2634 100%);
  }
  .hero-sky::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%2523n%29%27%2F%3E%3C%2Fsvg%3E");
    opacity: 0.22;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  .dark .hero-sky::before {
    opacity: 0.18;
    mix-blend-mode: soft-light;
  }
</style>
<header class="navbar navbar-overlay navbar-sticky border-b">
  <a href="#" class="brand me-2">
    <span class="brand-logo">
      <i class="font-serif font-bold not-italic">A</i>
    </span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <div class="navbar-collapse" data-sp-toggle="#navbar-transparent-toggle">
    <nav class="navbar-nav" aria-label="Main">
      <button id="navbar-transparent-products" class="navbar-link">
        Products
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-transparent-products">
        <div class="grid w-sm grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">Platform</a>
            <a href="#" class="navbar-link">Voice agents</a>
            <a href="#" class="navbar-link">Chat agents</a>
          </div>
          <div>
            <a href="#" class="navbar-link">Analytics</a>
            <a href="#" class="navbar-link">Integrations</a>
          </div>
        </div>
      </div>
      <a href="#" class="navbar-link">Customers</a>
      <a href="#" class="navbar-link">Pricing</a>
    </nav>
    <div class="navbar-actions ms-0 navbar:order-last">
      <a href="#" class="btn btn-outline">Log in</a>
      <a href="#" class="btn">Sign up</a>
    </div>
  </div>
  <button class="btn btn-ghost btn-icon ms-auto" aria-label="Toggle theme" onclick="document.documentElement.classList.toggle('dark')">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dark:hidden"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden dark:block"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
  </button>
  <button id="navbar-transparent-toggle" class="btn btn-ghost btn-icon navbar-toggle -me-2" aria-label="Toggle menu"></button>
</header>
<section class="hero-sky relative flex h-full shrink-0 flex-col items-center justify-center px-6 pt-14 pb-14 text-center md:pb-[calc(10vh+3.5rem)]">
  <div class="relative flex flex-col items-center">
    <a href="#" class="inline-flex items-center gap-2 rounded-full bg-foreground/5 py-1 ps-4 pe-1 text-sm font-medium backdrop-blur transition-colors hover:bg-foreground/10">
      New: Workflows 2.0 is here
      <span class="flex size-6 items-center justify-center rounded-full bg-foreground/10"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></span>
    </a>
    <h1 class="mt-6 max-w-2xl text-4xl leading-[1.1] font-medium tracking-tight text-balance sm:text-5xl sm:leading-[1.1]">The platform that turns ideas into shipped products</h1>
    <p class="mt-6 max-w-xs text-muted-foreground">Plan, build and launch with your whole team, and ship every week.</p>
    <div class="mt-10 flex items-center gap-1.5">
      <a href="#" class="btn btn-lg h-12 rounded-full px-8">Get started</a>
      <a href="#" class="btn btn-ghost btn-icon size-12 rounded-full bg-foreground/10 backdrop-blur hover:bg-foreground/15" aria-label="Watch the demo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 fill-current"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg></a>
    </div>
  </div>
</section>
<div class="h-[100rem] shrink-0"></div>

Navbar underline

Add navbar-nav-line to the navbar-nav for muted links without a fill and a line under the current one. Add border-b to the bar for a track under the line, and give any wrapper between the bar and the menu h-full so the line reaches the bottom edge.

<header class="navbar border-b">
  <a href="#" class="brand me-6">
    <span class="brand-logo">
      <i class="font-serif font-bold not-italic">A</i>
    </span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <button id="navbar-line-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
  <div class="navbar-collapse" data-sp-toggle="#navbar-line-toggle">
    <nav class="navbar-nav navbar-nav-line" aria-label="Main">
      <button id="navbar-line-products" class="navbar-link">
        Products
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-line-products">
        <div class="grid w-sm grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">Platform</a>
            <a href="#" class="navbar-link">Voice agents</a>
            <a href="#" class="navbar-link">Chat agents</a>
          </div>
          <div>
            <a href="#" class="navbar-link">Analytics</a>
            <a href="#" class="navbar-link">Integrations</a>
          </div>
        </div>
      </div>
      <a href="#" class="navbar-link active">Customers</a>
      <a href="#" class="navbar-link">Pricing</a>
      <a href="#" class="navbar-link">Blog</a>
    </nav>
    <div class="navbar-actions">
      <a href="#" class="btn btn-outline">Log in</a>
      <a href="#" class="btn">Sign up</a>
    </div>
  </div>
</header>
<div class="m-4 flex-1 rounded-xl bg-muted/50"></div>

Scrolling navbar

Leave out the navbar-collapse and the menu stays in the bar on small screens, where it scrolls sideways with faded edges. Its panels then open across the full width under the bar.

<header>
  <div class="navbar">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-name">Acme Inc.</span>
    </a>
    <div class="ms-auto flex items-center gap-2">
      <a href="#" class="btn btn-outline max-navbar:hidden">Contact us</a>
      <a href="#" class="btn">Log in</a>
    </div>
  </div>
  <div class="navbar h-12 border-b">
    <nav class="navbar-nav navbar-nav-line" aria-label="Main">
      <button id="navbar-scroll-products" class="navbar-link">
        Products
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-scroll-products">
        <div class="grid w-sm grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">Platform</a>
            <a href="#" class="navbar-link">Voice agents</a>
            <a href="#" class="navbar-link">Chat agents</a>
          </div>
          <div>
            <a href="#" class="navbar-link">Analytics</a>
            <a href="#" class="navbar-link">Integrations</a>
          </div>
        </div>
      </div>
      <button id="navbar-scroll-solutions" class="navbar-link">
        Solutions
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-scroll-solutions">
        <div class="grid w-xl grid-cols-3 gap-2">
          <div>
            <div class="navbar-label">Industries</div>
            <a href="#" class="navbar-link">Telecommunications</a>
            <a href="#" class="navbar-link">Financial services</a>
            <a href="#" class="navbar-link">Healthcare</a>
            <a href="#" class="navbar-link">Retail and e-commerce</a>
          </div>
          <div>
            <div class="navbar-label">Use cases</div>
            <a href="#" class="navbar-link">Customer support</a>
            <a href="#" class="navbar-link">Lead qualification</a>
            <a href="#" class="navbar-link">Outbound</a>
          </div>
          <div>
            <div class="navbar-label">Company size</div>
            <a href="#" class="navbar-link">Enterprise</a>
            <a href="#" class="navbar-link">Startups</a>
          </div>
        </div>
      </div>
      <a href="#" class="navbar-link active">Customers</a>
      <button id="navbar-scroll-resources" class="navbar-link">
        Resources
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="navbar-content" data-sp-toggle="#navbar-scroll-resources">
        <div class="grid w-md grid-cols-2 gap-2">
          <div>
            <a href="#" class="navbar-link">
              Blog
              <span class="navbar-link-description">Product news and stories</span>
            </a>
            <a href="#" class="navbar-link">
              Documentation
              <span class="navbar-link-description">Guides and API reference</span>
            </a>
          </div>
          <div>
            <a href="#" class="navbar-link">
              Changelog
              <span class="navbar-link-description">Recent features and fixes</span>
            </a>
            <a href="#" class="navbar-link">
              Help center
              <span class="navbar-link-description">Answers to common questions</span>
            </a>
          </div>
        </div>
      </div>
      <a href="#" class="navbar-link">Pricing</a>
    </nav>
  </div>
</header>
<div class="m-4 flex-1 rounded-xl bg-muted/50"></div>

Navbar icons and badges

Put an icon with icon-start before the text and a badge after it.

<header class="navbar">
  <a href="#" class="brand me-2">
    <span class="brand-logo">
      <i class="font-serif font-bold not-italic">A</i>
    </span>
    <span class="brand-name">Acme Inc.</span>
  </a>
  <nav class="navbar-nav" aria-label="Main">
    <a href="#" class="navbar-link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
      Home
    </a>
    <a href="#" class="navbar-link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
      Inbox
      <span class="badge badge-secondary">12</span>
    </a>
    <a href="#" class="navbar-link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>
      Documents
    </a>
    <a href="#" class="navbar-link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-start"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
      Calendar
    </a>
  </nav>
</header>
<div class="mx-4 mb-4 flex-1 rounded-xl bg-muted/50"></div>

Put your brand first, as a wordmark, an image logo, a colored mark, a name with a subtitle or a logo on its own.

<div class="flex flex-col gap-4">
  <header class="navbar navbar-center border-b">
    <a href="#" class="brand me-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 20" fill="currentColor" class="h-5 w-auto" aria-hidden="true"><text x="0" y="16" font-family="ui-sans-serif, system-ui, sans-serif" font-size="18" font-weight="800" letter-spacing="1.5">ACME</text></svg>
      <span class="sr-only">Acme Inc.</span>
    </a>
    <button id="navbar-brand-wordmark-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-brand-wordmark-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
  <header class="navbar navbar-center border-b">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <img src="/logo.svg" alt="" class="dark:invert" />
      </span>
      <span class="brand-name">Starting Point</span>
    </a>
    <button id="navbar-brand-image-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-brand-image-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
  <header class="navbar navbar-center border-b">
    <a href="#" class="brand me-2">
      <span class="brand-logo size-7 bg-transparent">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="size-7"><circle cx="14" cy="14" r="14" fill="#e11d48"/><path d="M6.5 14h3l2.5-5 4 10 2.5-5h3" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
      <span class="brand-name">Pulse</span>
    </a>
    <button id="navbar-brand-mark-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-brand-mark-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
  <header class="navbar navbar-center border-b">
    <a href="#" class="brand me-2">
      <span class="brand-logo brand-logo-lg">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-text">
        <span class="brand-name">Acme Inc.</span>
        <span class="brand-subtitle">Enterprise</span>
      </span>
    </a>
    <button id="navbar-brand-subtitle-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-brand-subtitle-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
  <header class="navbar navbar-center border-b">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="sr-only">Acme Inc.</span>
    </a>
    <button id="navbar-brand-logoOnly-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-brand-logoOnly-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <a href="#" class="navbar-link">Features</a>
        <a href="#" class="navbar-link">Pricing</a>
        <a href="#" class="navbar-link">About</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline">Log in</a>
        <a href="#" class="btn">Sign up</a>
      </div>
    </div>
  </header>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="navbar-rtl-demo" dir="rtl" class="flex flex-1 flex-col">
  <header class="navbar">
    <a href="#" class="brand me-2">
      <span class="brand-logo">
        <i class="font-serif font-bold not-italic">A</i>
      </span>
      <span class="brand-name" data-i18n="brand">شركة أكمي</span>
    </a>
    <button id="navbar-rtl-toggle" class="btn btn-ghost btn-icon navbar-toggle ms-auto -me-2" aria-label="Toggle menu"></button>
    <div class="navbar-collapse" data-sp-toggle="#navbar-rtl-toggle">
      <nav class="navbar-nav" aria-label="Main">
        <button id="navbar-rtl-products" class="navbar-link">
          <span data-i18n="products">المنتجات</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="navbar-content" data-sp-toggle="#navbar-rtl-products">
          <div class="grid w-sm grid-cols-2 gap-2">
            <div>
              <a href="#" class="navbar-link" data-i18n="platform">المنصة</a>
              <a href="#" class="navbar-link" data-i18n="voiceAgents">وكلاء الصوت</a>
              <a href="#" class="navbar-link" data-i18n="chatAgents">وكلاء الدردشة</a>
            </div>
            <div>
              <a href="#" class="navbar-link" data-i18n="analytics">التحليلات</a>
              <a href="#" class="navbar-link" data-i18n="integrations">التكاملات</a>
            </div>
          </div>
        </div>
        <button id="navbar-rtl-solutions" class="navbar-link">
          <span data-i18n="solutions">الحلول</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="navbar-content" data-sp-toggle="#navbar-rtl-solutions">
          <div class="grid w-xl grid-cols-3 gap-2">
            <div>
              <div class="navbar-label" data-i18n="industries">القطاعات</div>
              <a href="#" class="navbar-link" data-i18n="telecom">الاتصالات</a>
              <a href="#" class="navbar-link" data-i18n="finance">الخدمات المالية</a>
              <a href="#" class="navbar-link" data-i18n="healthcare">الرعاية الصحية</a>
              <a href="#" class="navbar-link" data-i18n="retail">التجزئة والتجارة الإلكترونية</a>
            </div>
            <div>
              <div class="navbar-label" data-i18n="useCases">حالات الاستخدام</div>
              <a href="#" class="navbar-link" data-i18n="support">دعم العملاء</a>
              <a href="#" class="navbar-link" data-i18n="leads">تأهيل العملاء المحتملين</a>
              <a href="#" class="navbar-link" data-i18n="outbound">التواصل الصادر</a>
            </div>
            <div>
              <div class="navbar-label" data-i18n="companySize">حجم الشركة</div>
              <a href="#" class="navbar-link" data-i18n="enterprise">المؤسسات</a>
              <a href="#" class="navbar-link" data-i18n="startups">الشركات الناشئة</a>
            </div>
          </div>
        </div>
        <a href="#" class="navbar-link" data-i18n="customers">العملاء</a>
        <button id="navbar-rtl-resources" class="navbar-link">
          <span data-i18n="resources">الموارد</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-end"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="navbar-content" data-sp-toggle="#navbar-rtl-resources">
          <div class="grid w-md grid-cols-2 gap-2">
            <div>
              <a href="#" class="navbar-link">
                <span data-i18n="blog">المدونة</span>
                <span class="navbar-link-description" data-i18n="blogDesc">أخبار المنتج والقصص</span>
              </a>
              <a href="#" class="navbar-link">
                <span data-i18n="docs">التوثيق</span>
                <span class="navbar-link-description" data-i18n="docsDesc">أدلة ومرجع واجهة البرمجة</span>
              </a>
            </div>
            <div>
              <a href="#" class="navbar-link">
                <span data-i18n="changelog">سجل التغييرات</span>
                <span class="navbar-link-description" data-i18n="changelogDesc">أحدث الميزات والإصلاحات</span>
              </a>
              <a href="#" class="navbar-link">
                <span data-i18n="help">مركز المساعدة</span>
                <span class="navbar-link-description" data-i18n="helpDesc">إجابات للأسئلة الشائعة</span>
              </a>
            </div>
          </div>
        </div>
        <a href="#" class="navbar-link" data-i18n="pricing">الأسعار</a>
      </nav>
      <div class="navbar-actions">
        <a href="#" class="btn btn-outline" data-i18n="logIn">تسجيل الدخول</a>
        <a href="#" class="btn" data-i18n="signUp">إنشاء حساب</a>
      </div>
    </div>
  </header>
  <div class="mx-4 mb-4 flex-1 rounded-xl bg-muted/50"></div>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", brand: "شركة أكمي", products: "المنتجات", platform: "المنصة", voiceAgents: "وكلاء الصوت", chatAgents: "وكلاء الدردشة", analytics: "التحليلات", integrations: "التكاملات", solutions: "الحلول", industries: "القطاعات", telecom: "الاتصالات", finance: "الخدمات المالية", healthcare: "الرعاية الصحية", retail: "التجزئة والتجارة الإلكترونية", useCases: "حالات الاستخدام", support: "دعم العملاء", leads: "تأهيل العملاء المحتملين", outbound: "التواصل الصادر", companySize: "حجم الشركة", enterprise: "المؤسسات", startups: "الشركات الناشئة", customers: "العملاء", resources: "الموارد", blog: "المدونة", blogDesc: "أخبار المنتج والقصص", docs: "التوثيق", docsDesc: "أدلة ومرجع واجهة البرمجة", changelog: "سجل التغييرات", changelogDesc: "أحدث الميزات والإصلاحات", help: "مركز المساعدة", helpDesc: "إجابات للأسئلة الشائعة", pricing: "الأسعار", logIn: "تسجيل الدخول", signUp: "إنشاء حساب" },
    he: { dir: "rtl", brand: "אקמי בע״מ", products: "מוצרים", platform: "פלטפורמה", voiceAgents: "סוכנים קוליים", chatAgents: "סוכני צ׳אט", analytics: "אנליטיקה", integrations: "אינטגרציות", solutions: "פתרונות", industries: "תעשיות", telecom: "תקשורת", finance: "שירותים פיננסיים", healthcare: "בריאות", retail: "קמעונאות ומסחר מקוון", useCases: "תרחישי שימוש", support: "תמיכת לקוחות", leads: "סינון לידים", outbound: "פניות יוצאות", companySize: "גודל חברה", enterprise: "ארגונים", startups: "סטארטאפים", customers: "לקוחות", resources: "משאבים", blog: "בלוג", blogDesc: "חדשות מוצר וסיפורים", docs: "תיעוד", docsDesc: "מדריכים ותיעוד API", changelog: "יומן שינויים", changelogDesc: "תכונות ותיקונים אחרונים", help: "מרכז עזרה", helpDesc: "תשובות לשאלות נפוצות", pricing: "מחירים", logIn: "התחברות", signUp: "הרשמה" },
    en: { dir: "ltr", brand: "Acme Inc.", products: "Products", platform: "Platform", voiceAgents: "Voice agents", chatAgents: "Chat agents", analytics: "Analytics", integrations: "Integrations", solutions: "Solutions", industries: "Industries", telecom: "Telecommunications", finance: "Financial services", healthcare: "Healthcare", retail: "Retail and e-commerce", useCases: "Use cases", support: "Customer support", leads: "Lead qualification", outbound: "Outbound", companySize: "Company size", enterprise: "Enterprise", startups: "Startups", customers: "Customers", resources: "Resources", blog: "Blog", blogDesc: "Product news and stories", docs: "Documentation", docsDesc: "Guides and API reference", changelog: "Changelog", changelogDesc: "Recent features and fixes", help: "Help center", helpDesc: "Answers to common questions", pricing: "Pricing", logIn: "Log in", signUp: "Sign up" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("navbar-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>

CSS variables

VariableDefaultDescription
--navbar-height3.5rem, 2.5rem with navbar-smThe height of the bar
--navbar-padding1rem, 1.5rem from mdThe side padding of the bar
<header class="navbar [--navbar-height:3rem]">...</header>

The menu folds below the navbar breakpoint, md by default. Move it with --breakpoint-navbar in your theme, and use the matching navbar: and max-navbar: variants in your markup.

@theme {
  --breakpoint-navbar: 64rem;
}

Options

Set each option with its own data-sp-* attribute on the navbar-content panel. The navbar-collapse takes data-sp-toggle the same way.

AttributeValuesDefault
data-sp-toggleCSS selectorNone
data-sp-placementFloating UI placementbottom-start
data-sp-offsetNumber8
data-sp-align-offsetNumber0
data-sp-modehover | clickhover
data-sp-itemCSS selector.navbar-link
<div class="navbar-content" data-sp-toggle="#products" data-sp-placement="bottom"></div>

In hover mode a panel opens while the pointer rests on its button and closes once the pointer leaves. A click on the button pins it open until you press elsewhere. Touch and the keyboard open it like click mode.

JavaScript

Events

Lifecycle events fire on a panel and on the drawer. The before* events are cancelable.

EventWhen
sp-beforeshowBefore opening (cancelable)
sp-showOpening
sp-shownOpen and settled
sp-beforehideBefore closing (cancelable)
sp-hideClosing
sp-hiddenClosed
const menu = document.querySelector(".navbar-collapse");
 
menu.addEventListener("sp-shown", () => {
  // The drawer is open
});

Methods

Get a panel with sp.navbarContent(el) and the drawer with sp.navbarCollapse(el), then call their methods:

MethodDescription
show()Open the panel or the drawer
hide()Close the panel or the drawer
toggle()Open if closed, else close
const products = sp.navbarContent(document.querySelector("#products-panel"));
 
products.show();