Tailwind CSS Navbars Collection

A collection of versatile navbar components built with Tailwind CSS. These examples provide clean, responsive structures for website navigation, suitable for various layouts and use cases.

Each navbar comes with a preview and readily copyable HTML code. Adapt them to your project by modifying the Tailwind utility classes to fit your design system and adding JavaScript for interactive elements like dropdowns or mobile menu toggles where needed.

Top Navbar (Static)

<!-- Top Navbar (Static) -->
<nav class="bg-white shadow-md py-4">
  <div class="container mx-auto flex justify-between items-center px-4">
    <!-- Logo -->
    <a href="#" class="text-blue-600 font-bold text-xl">WPDean</a>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6 items-center">
      <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
      <a href="#" class="text-gray-600 hover:text-gray-900">Features</a>
      <a href="#" class="text-gray-600 hover:text-gray-900">Pricing</a>
      <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium">Sign Up</a>
    </div>

    <!-- Mobile Menu Button (Requires JS for toggling) -->
    <div class="md:hidden">
      <button class="text-gray-600 hover:text-gray-900 focus:outline-none">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
      </button>
    </div>
  </div>
  <!-- Mobile Menu (Hidden by default, toggled by JS) -->
  <!--
  <div class="md:hidden hidden" id="mobile-menu-static">
    <a href="#" class="block px-4 py-2 text-gray-600 hover:bg-gray-100">Home</a>
    <a href="#" class="block px-4 py-2 text-gray-600 hover:bg-gray-100">Features</a>
    <a href="#" class="block px-4 py-2 text-gray-600 hover:bg-gray-100">Pricing</a>
    <a href="#" class="block px-4 py-2 bg-blue-500 text-white text-center rounded mx-4 my-2">Sign Up</a>
  </div>
  -->
</nav>

Sticky Navbar (on scroll)

Scroll within the dashed box below to see the navbar stick.

Scroll down to see the effect...

Collapsible Navbar (Hamburger)

Note: This preview shows the structure. Basic JS is needed to make the hamburger button toggle the mobile menu's visibility.

<!-- Collapsible Navbar (Hamburger) -->
<!-- Requires JavaScript to toggle the 'hidden' class on the #mobile-menu element when the button is clicked. -->
<nav class="bg-gray-800 text-white p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo -->
    <a href="#" class="text-white font-bold text-xl">WPDean</a>

    <!-- Desktop Menu (Hidden on small screens) -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:bg-gray-700 px-3 py-2 rounded">Home</a>
      <a href="#" class="hover:bg-gray-700 px-3 py-2 rounded">About</a>
      <a href="#" class="hover:bg-gray-700 px-3 py-2 rounded">Services</a>
      <a href="#" class="hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
    </div>

    <!-- Mobile Menu Button (Visible on small screens) -->
    <div class="md:hidden">
      <!-- Add your JS event listener to this button -->
      <button id="hamburger-button" class="focus:outline-none" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
        <!-- Optional: Add an icon for the 'close' state toggled via JS -->
        <!-- <svg class="h-6 w-6 hidden" ...> X icon </svg> -->
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, shown on small screens when toggled) -->
  <div class="md:hidden hidden mt-3 space-y-1" id="mobile-menu">
    <a href="#" class="block px-3 py-2 rounded hover:bg-gray-700">Home</a>
    <a href="#" class="block px-3 py-2 rounded hover:bg-gray-700">About</a>
    <a href="#" class="block px-3 py-2 rounded hover:bg-gray-700">Services</a>
    <a href="#" class="block px-3 py-2 rounded hover:bg-gray-700">Contact</a>
  </div>
</nav>

<!-- Example Basic JavaScript Toggle (place in your script file or <script> tag) -->
<!--
<script>
  const hamburgerButton = document.getElementById('hamburger-button');
  const mobileMenu = document.getElementById('mobile-menu');

  hamburgerButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
    // Toggle aria-expanded attribute for accessibility
    const isExpanded = mobileMenu.classList.contains('hidden') ? 'false' : 'true';
    hamburgerButton.setAttribute('aria-expanded', isExpanded);
    // Optional: Toggle between hamburger and close icons
  });
</script>
-->

Icon + Text Navbar

<!-- Icon + Text Navbar -->
<!-- Uses flexbox to align icons and text horizontally within each link. -->
<!-- Replace SVGs with your preferred icon set. -->
<nav class="bg-indigo-600 text-indigo-100 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-3">
      <!-- Logo -->
      <a href="#" class="text-white font-bold text-xl">WPDean</a>

      <!-- Navigation Links -->
      <div class="flex space-x-4"> <!-- Adjust spacing with space-x-* -->
        <!-- Link 1 -->
        <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-indigo-500 hover:text-white transition duration-150 ease-in-out">
          <!-- Icon -->
          <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
          <!-- Text -->
          <span>Home</span>
        </a>

        <!-- Link 2 -->
        <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-indigo-500 hover:text-white transition duration-150 ease-in-out">
          <!-- Icon -->
          <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <!-- Text -->
          <span>About</span>
        </a>

        <!-- Link 3 -->
        <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-indigo-500 hover:text-white transition duration-150 ease-in-out">
          <!-- Icon -->
          <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <!-- Text -->
          <span>Contact</span>
        </a>
      </div>
    </div>
  </div>
</nav>

Center-Aligned Navbar

<!-- Center-Aligned Navbar -->
<!-- Uses flexbox with justify-center for the main navigation links. -->
<!-- Logo and other elements might need adjusted positioning based on desired mobile/desktop layout. -->
<nav class="bg-white border-b border-gray-200 py-4">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center justify-center md:justify-between">
      <!-- Logo Area (adjust alignment as needed) -->
      <div class="mb-4 md:mb-0 flex-shrink-0"> <!-- Use flex-shrink-0 if needed -->
        <a href="#" class="text-blue-600 font-bold text-2xl">WPDean</a>
      </div>

      <!-- Centered Navigation Links -->
      <!-- On medium screens and up, allow this div to grow and center its content -->
      <div class="flex flex-grow justify-center space-x-6 mb-4 md:mb-0">
        <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Blog</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
      </div>

      <!-- Optional Right-Aligned Elements (adjust visibility/placement) -->
      <div class="flex-shrink-0"> <!-- Use flex-shrink-0 if needed -->
         <!-- Example: Login button or search icon -->
         <a href="#" class="text-sm text-gray-500 hover:text-blue-500">Login</a>
      </div>
    </div>
  </div>
</nav>

Split Navbar (Left/Right)

<!-- Split Navbar (Left/Right) -->
<!-- Uses flexbox with justify-between on the main container. -->
<!-- Group left-aligned items (logo, primary nav) and right-aligned items (actions, user links) into separate divs. -->
<nav class="bg-white shadow-sm py-3">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center">

      <!-- Left Section -->
      <div class="flex items-center space-x-6">
        <!-- Logo -->
        <a href="#" class="text-blue-600 font-bold text-xl">WPDean</a>

        <!-- Primary Navigation (Desktop) -->
        <div class="hidden md:flex space-x-4">
          <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Products</a>
          <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Solutions</a>
          <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Docs</a>
        </div>
      </div>

      <!-- Right Section -->
      <div class="flex items-center space-x-4">
        <!-- Secondary Links/Actions -->
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm hidden sm:block">Support</a> <!-- Example: hide on extra small -->
        <a href="#" class="text-sm text-gray-600 hover:text-gray-900">Login</a>
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-1.5 rounded-md text-sm font-medium">Sign Up</a>
      </div>

      <!-- Optional: Mobile Menu Button (if primary links need collapsing) -->
      <!--
      <div class="md:hidden">
        <button>... Hamburger ...</button>
      </div>
      -->

    </div>
    <!-- Optional: Mobile Menu Dropdown (for primary links) -->
    <!--
    <div class="md:hidden hidden" id="mobile-menu-split"> ... </div>
    -->
  </div>
</nav>

FAQ on Tailwind CSS Navbars

How do I create a responsive navbar with Tailwind CSS?

Creating a responsive navbar requires proper utility classes for different breakpoints. Start with a basic flex container, then use Tailwind's responsive prefixes (md:, lg:) to change layouts at different screen sizes. Implement a hamburger menu for mobile views using Alpine.js toggle or simple JavaScript. The mobile-first approach ensures your navigation works across all devices.

What's the easiest way to add dropdown menus to my Tailwind navbar?

Dropdown menus in Tailwind navbars can be implemented using Headless UI components or basic HTML/CSS with hidden elements that appear on hover/click. Use group and group-hover utilities for interactive states. Add z-index management for proper layering and implement transitions for smooth animations. Adam Wathan demonstrates several patterns in official examples.

Can I create a dark mode navbar with Tailwind CSS?

Yes. Use Tailwind's dark mode feature with the dark: prefix for color schemes. Toggle between modes with JavaScript or the prefers-color-scheme media query. Typography plugin helps maintain readability across modes. Many frontend developers combine this with local storage to remember user preferences.

How do I make a sticky navbar that changes on scroll?

For a sticky header, apply sticky top-0 classes. Use JavaScript to detect scroll position and dynamically add/remove classes that change navbar height, background opacity, or box-shadow. This pattern appears in many CodePen examples and works well with CSS variables for smooth transitions.

What's the best way to highlight active navigation links?

Use conditional classes for active states or leverage your framework's built-in features (like Next.js's useRouter). Add distinctive border styles or background colors. Many web development blogs recommend adding aria-current="page" for accessibility standards compliance alongside visual indicators.

How do I customize the default spacing in Tailwind navbar items?

Adjust spacing with padding utility and margin classes like px-4 or gap-x-6. For more precise control, extend your Tailwind config with custom spacing values. The utility-first CSS approach lets you apply specific spacing to different elements rather than using generic navbar styles.

Can I animate my Tailwind CSS navbar components?

Yes. Use Tailwind's transition utilities or add the Tailwind CSS Animation plugin for more complex navbar animations. Combine with hover effects and focus styles for interactive elements. Some developers integrate libraries like Framer Motion for React or Vue components for advanced movement patterns.

How do I position logo and nav items properly in Tailwind?

Use flexbox layout with justify-between for the classic logo-left/links-right pattern or justify-center for centered layouts. The grid system works well for complex arrangements. Remember that proper HTML structure with semantic tags helps both SEO and accessibility. TailwindUI provides several professional patterns.

What about vertical navbars with Tailwind CSS?

Vertical navbars work well with flex-col instead of the default horizontal flow. They're popular in dashboards and admin interfaces. Add h-screen for full-height navigation. GitHub repositories often showcase examples using nested navigation structures, combining both horizontal and vertical elements for complex UI components.

How do I implement a transparent navbar that becomes solid on scroll?

Start with bg-transparent and add JavaScript that applies solid background classes on scroll events. Use utility classes like backdrop-filter backdrop-blur for semi-transparent effects. This technique appears in many web design trends articles and YouTube tutorials. The combination creates sophisticated user experience design.