Tailwind CSS Navbar Examples

Responsive navigation bars for landing pages and apps — a simple link bar, a navbar with call-to-action buttons and a hamburger mobile menu built on native <details>.

3 components · live preview · copy as HTML or JSX · free for commercial use

3 navbars to copy

Simple Navbar

Navbars

Links wrap under the logo on narrow screens — no JavaScript, nothing hidden. aria-current marks the active page.

<header class="w-full border-b border-slate-200 bg-white">
  <nav aria-label="Main" class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-8 gap-y-3 px-4 py-3">
    <a href="#" class="flex items-center gap-2 text-base font-bold text-slate-900">
      <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-600 text-sm text-white">A</span>
      Acme
    </a>
    <ul class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm font-medium text-slate-600">
      <li><a href="#" aria-current="page" class="text-indigo-600">Home</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Features</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Pricing</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Blog</a></li>
    </ul>
  </nav>
</header>

Navbar with CTA Buttons

Navbars

Below 768px the links drop to a second row (order-last w-full) while the CTAs stay beside the logo.

<header class="w-full border-b border-slate-200 bg-white">
  <nav aria-label="Main" class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-y-3 px-4 py-3">
    <a href="#" class="flex items-center gap-2 text-base font-bold text-slate-900">
      <span class="h-7 w-7 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500"></span>
      Lumen
    </a>
    <ul class="order-last flex w-full flex-wrap justify-center gap-x-6 gap-y-2 border-t border-slate-100 pt-3 text-sm font-medium text-slate-600 md:order-none md:w-auto md:border-0 md:pt-0">
      <li><a href="#" class="transition-colors hover:text-slate-900">Product</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Solutions</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Pricing</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Docs</a></li>
    </ul>
    <div class="flex items-center gap-2">
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-100">Log in</a>
      <a href="#" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700">Get started</a>
    </div>
  </nav>
</header>

Responsive Navbar with Mobile Menu

Navbars

The hamburger menu is a native <details> element — no JavaScript. It appears below 768px; narrow your browser window to try it.

<header class="relative w-full border-b border-slate-200 bg-white">
  <nav aria-label="Main" class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
    <a href="#" class="text-lg font-extrabold tracking-tight text-slate-900">north<span class="text-indigo-600">.</span></a>
    <ul class="hidden items-center gap-8 text-sm font-medium text-slate-600 md:flex">
      <li><a href="#" class="transition-colors hover:text-slate-900">Features</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Customers</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Pricing</a></li>
      <li><a href="#" class="transition-colors hover:text-slate-900">Company</a></li>
    </ul>
    <a href="#" class="hidden rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 md:inline-flex">Sign up</a>
    <details class="group/menu md:hidden">
      <summary aria-label="Menu" class="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-lg text-slate-700 hover:bg-slate-100 [&::-webkit-details-marker]:hidden">
        <svg class="h-6 w-6 group-open/menu:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" /></svg>
        <svg class="hidden h-6 w-6 group-open/menu:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" /></svg>
      </summary>
      <div class="absolute inset-x-0 top-full z-10 border-b border-slate-200 bg-white px-4 pb-4 pt-2 shadow-lg">
        <ul class="space-y-1 text-sm font-medium text-slate-700">
          <li><a href="#" class="block rounded-lg px-3 py-2 hover:bg-slate-50">Features</a></li>
          <li><a href="#" class="block rounded-lg px-3 py-2 hover:bg-slate-50">Customers</a></li>
          <li><a href="#" class="block rounded-lg px-3 py-2 hover:bg-slate-50">Pricing</a></li>
          <li><a href="#" class="block rounded-lg px-3 py-2 hover:bg-slate-50">Company</a></li>
        </ul>
        <a href="#" class="mt-3 block rounded-lg bg-slate-900 px-4 py-2 text-center text-sm font-semibold text-white">Sign up</a>
      </div>
    </details>
  </nav>
</header>

Building a responsive navbar

A navbar needs to do three things at every screen size: show the brand, give access to every top-level link and keep the main call to action in reach. The simplest responsive pattern is to let the links wrap onto a second row on small screens (flex-wrap, or order-last w-full as in the CTA navbar), which needs no JavaScript and hides nothing. Once you have more than four or five links, collapse them into a menu below the md breakpoint instead.

The mobile menu example uses the native <details> and <summary> elements: the browser handles the open and closed state and the keyboard, and Tailwind's named group-open/menu variant swaps the hamburger icon for a close icon. The dropdown panel is positioned absolute inset-x-0 top-full against the relative header, so it overlays the page instead of pushing content down.

Accessibility checklist

Wrap the links in a <nav> with an aria-label such as "Main" so screen-reader users can jump straight to it, and give icon-only toggles an accessible name (aria-label="Menu"). Mark the current page with aria-current="page" rather than color alone. If the navbar is sticky (sticky top-0 z-50), add scroll-margin-top to in-page anchors so headings are not hidden underneath it.

← Back to the full UI Component Library

Frequently Asked Questions

How do I make a Tailwind navbar responsive?↓

Show the full link list from the md breakpoint up (hidden md:flex) and a menu button below it (md:hidden). For short link lists, flex-wrap alone is often enough: the links drop to a second row on phones.

Can I build a mobile hamburger menu without JavaScript?↓

Yes. Put the menu inside a <details> element with the hamburger icon in its <summary>. The browser toggles it on click and with the keyboard, and the group-open: variant styles the open state.

How do I make a navbar sticky in Tailwind?↓

Add sticky top-0 z-50 to the <header>, plus a background color (and optionally backdrop-blur) so page content does not show through while scrolling.

Last updated: November 7, 2026