0
0
Tailwindmarkup~5 mins

Navigation bar patterns in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A navigation bar helps people move around a website easily. It shows links to important pages in one place.

When you want visitors to find main pages quickly.
When your website has multiple sections or pages.
When you want a menu that works well on phones and computers.
When you want to keep your site organized and easy to use.
Syntax
Tailwind
<nav class="flex items-center justify-between p-4 bg-gray-800 text-white">
  <div class="text-lg font-bold">Logo</div>
  <ul class="flex space-x-4">
    <li><a href="#" class="hover:underline">Home</a></li>
    <li><a href="#" class="hover:underline">About</a></li>
    <li><a href="#" class="hover:underline">Services</a></li>
    <li><a href="#" class="hover:underline">Contact</a></li>
  </ul>
</nav>
Use flex to arrange items horizontally.
Use spacing utilities like space-x-4 to add space between links.
Examples
A simple navigation bar with a blue background and hover color change on links.
Tailwind
<nav class="flex items-center justify-between p-4 bg-blue-600 text-white">
  <div class="font-bold">MySite</div>
  <ul class="flex space-x-6">
    <li><a href="#" class="hover:text-yellow-300">Home</a></li>
    <li><a href="#" class="hover:text-yellow-300">Blog</a></li>
    <li><a href="#" class="hover:text-yellow-300">Contact</a></li>
  </ul>
</nav>
This example shows a responsive nav bar with a menu button visible on small screens.
Tailwind
<nav class="bg-gray-900 text-white p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-semibold">Brand</div>
    <button class="md:hidden" aria-label="Open menu">Menu</button>
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="hover:underline">Home</a></li>
      <li><a href="#" class="hover:underline">Products</a></li>
      <li><a href="#" class="hover:underline">About</a></li>
      <li><a href="#" class="hover:underline">Contact</a></li>
    </ul>
  </div>
</nav>
Sample Program

This code creates a navigation bar with a brand name on the left and links on the right. On small screens, the links hide and a menu button appears. The colors and spacing come from Tailwind CSS classes.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simple Navigation Bar</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <nav class="flex items-center justify-between p-4 bg-indigo-700 text-white">
    <div class="text-2xl font-bold">MyWebsite</div>
    <ul class="hidden md:flex space-x-6">
      <li><a href="#" class="hover:underline">Home</a></li>
      <li><a href="#" class="hover:underline">Services</a></li>
      <li><a href="#" class="hover:underline">About</a></li>
      <li><a href="#" class="hover:underline">Contact</a></li>
    </ul>
    <button class="md:hidden" aria-label="Open menu">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </nav>
</body>
</html>
OutputSuccess
Important Notes

Use semantic <nav> for accessibility.

Make sure links have clear text and visible focus styles for keyboard users.

Use responsive classes like md:hidden to show/hide elements on different screen sizes.

Summary

Navigation bars help users find pages easily.

Tailwind CSS makes it easy to create flexible, responsive nav bars.

Use semantic HTML and accessibility features for best user experience.