Navigation Components

Headers, menus, breadcrumbs, and navigation patterns

Back to Site

Horizontal Navbar

Top navigation bar with logo and menu items

Code 
<nav class="bg-white dark:bg-gray-800 shadow">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <span class="text-xl font-bold text-gray-900 dark:text-white">Logo</span>
            </div>
            <div class="flex items-center space-x-4">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Home</a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">About</a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Services</a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2">Contact</a>
            </div>
        </div>
    </div>
</nav>

Tabs

Tabbed navigation for content sections

Profile content here...
Settings content here...
Notifications content here...
Code 
<div x-data="{ activeTab: 'profile' }">
    <div class="border-b border-gray-200 dark:border-gray-700">
        <nav class="-mb-px flex space-x-8">
            <button @click="activeTab = 'profile'" 
                    :class="activeTab === 'profile' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'" 
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                Profile
            </button>
            <button @click="activeTab = 'settings'" 
                    :class="activeTab === 'settings' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'" 
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                Settings
            </button>
            <button @click="activeTab = 'notifications'" 
                    :class="activeTab === 'notifications' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'" 
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                Notifications
            </button>
        </nav>
    </div>
    <div class="mt-4">
        <div x-show="activeTab === 'profile'" class="text-gray-700 dark:text-gray-300">Profile content here...</div>
        <div x-show="activeTab === 'settings'" class="text-gray-700 dark:text-gray-300">Settings content here...</div>
        <div x-show="activeTab === 'notifications'" class="text-gray-700 dark:text-gray-300">Notifications content here...</div>
    </div>
</div>

Vertical Sidebar Menu

Side navigation with icons

Code 
<div class="w-64 bg-white dark:bg-gray-800 shadow rounded-lg">
    <nav class="p-4 space-y-1">
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
            </svg>
            Users
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
            </svg>
            Posts
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
            </svg>
            Settings
        </a>
    </nav>
</div>

Mobile Menu (Hamburger)

Responsive mobile navigation menu

Logo
Home About Services Contact
Code 
<div x-data="{ mobileMenuOpen: false }" class="bg-white dark:bg-gray-800 shadow rounded-lg">
    <div class="px-4 py-3 flex justify-between items-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">Logo</span>
        <button @click="mobileMenuOpen = !mobileMenuOpen" 
                class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                <path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>
    <div x-show="mobileMenuOpen" class="border-t border-gray-200 dark:border-gray-700 px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Home</a>
        <a href="#" class="block px-3 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">About</a>
        <a href="#" class="block px-3 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Services</a>
        <a href="#" class="block px-3 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Contact</a>
    </div>
</div>

Stepper / Multi-step Wizard

Step-by-step progress indicator for forms and processes

Horizontal Stepper

1

Step 1

Account Info

2

Step 2

Personal Details

3

Step 3

Confirmation

Account Information

Enter your account details to get started.

Personal Details

Tell us more about yourself.

Review & Confirm

Please review your information before submitting.

Vertical Stepper

1

Choose Service

Select the service you want to purchase

2

Enter Details

Provide your contact information

3

Complete

Review and submit your order

Code 
<div x-data="{ currentStep: 1 }">
    <!-- Stepper Header -->
    <div class="flex items-center justify-between mb-8">
        <div class="flex-1 flex items-center" :class="currentStep >= 1 ? 'text-blue-600' : 'text-gray-400'">
            <div class="flex items-center justify-center w-10 h-10 rounded-full" :class="currentStep >= 1 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600'">
                1
            </div>
            <span class="ml-2 text-sm font-medium">Account</span>
        </div>
        <div class="flex-1 h-1" :class="currentStep >= 2 ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"></div>
        <div class="flex-1 flex items-center" :class="currentStep >= 2 ? 'text-blue-600' : 'text-gray-400'">
            <div class="flex items-center justify-center w-10 h-10 rounded-full" :class="currentStep >= 2 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600'">
                2
            </div>
            <span class="ml-2 text-sm font-medium">Profile</span>
        </div>
        <div class="flex-1 h-1" :class="currentStep >= 3 ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'"></div>
        <div class="flex-1 flex items-center" :class="currentStep >= 3 ? 'text-blue-600' : 'text-gray-400'">
            <div class="flex items-center justify-center w-10 h-10 rounded-full" :class="currentStep >= 3 ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600'">
                3
            </div>
            <span class="ml-2 text-sm font-medium">Complete</span>
        </div>
    </div>
    
    <!-- Navigation Buttons -->
    <div class="flex justify-between">
        <button @click="currentStep > 1 && currentStep--" :disabled="currentStep === 1" class="px-4 py-2 border rounded-lg disabled:opacity-50">
            Previous
        </button>
        <button @click="currentStep < 3 && currentStep++" :disabled="currentStep === 3" class="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50">
            Next
        </button>
    </div>
</div>