SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu

SaaS dashboard navbar built with pure HTML and Tailwind CSS.

This tailwind example is contributed by JUGENDRA GANGWAR, on 30-Jun-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is drawer

Header Sidebar Navbar

Author JUGENDRA GANGWAR

Tailwind v3.4 222 2

Fork Fullscreen

<header class="sticky top-0 z-50 w-full border-b border-slate-200/80 bg-white/80 backdrop-blur-xl supports-[backdrop-filter]:bg-white/60">
  <nav class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8" aria-label="Main navigation">
    <div class="flex items-center gap-8">
      <a href="#" class="flex items-center gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 rounded-lg">
        <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 shadow-lg shadow-indigo-500/30">
          <svg class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </span>
        <span class="text-lg font-semibold tracking-tight text-slate-900">TailwindFlex</span>
      </a>

<ul class="hidden items-center gap-1 lg:flex">
        <li>
          <a href="#" aria-current="page" class="relative rounded-lg px-3.5 py-2 text-sm font-medium text-indigo-600 transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
            Dashboard
            <span class="absolute inset-x-3 -bottom-[18px] h-0.5 rounded-full bg-indigo-600"></span>
          </a>
        </li>
        <li>
          <a href="#" class="rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
            Projects
          </a>
        </li>
        <li>
          <a href="#" class="rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
            Analytics
          </a>
        </li>
        <li class="group relative">
          <button type="button" class="flex items-center gap-1 rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
            Resources
            <svg class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          <div class="invisible absolute left-0 top-full z-20 w-56 translate-y-2 rounded-xl border border-slate-200 bg-white p-2 opacity-0 shadow-xl shadow-slate-900/10 transition-all duration-200 group-hover:visible group-hover:translate-y-1 group-hover:opacity-100">
            <a href="#" class="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-700 transition-colors duration-150 hover:bg-indigo-50 hover:text-indigo-600">Documentation</a>
            <a href="#" class="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-700 transition-colors duration-150 hover:bg-indigo-50 hover:text-indigo-600">API Reference</a>
            <a href="#" class="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-700 transition-colors duration-150 hover:bg-indigo-50 hover:text-indigo-600">Changelog</a>
          </div>
        </li>
        <li>
          <a href="#" class="rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
            Pricing
          </a>
        </li>
        <li>
          <a href="#" class="rounded-lg px-3.5 py-2 text-sm font-medium text-slate-600 transition-colors duration-200 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
            Support
          </a>
        </li>
      </ul>
    </div>

<a href="#" class="hidden items-center justify-center rounded-lg bg-gradient-to-br from-indigo-600 to-violet-600 px-4 py-2 text-sm font-semibold text-white shadow-md shadow-indigo-500/30 transition-all duration-200 hover:shadow-lg hover:shadow-indigo-500/40 hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 lg:inline-flex">
        Upgrade Plan
      </a>

<nav class="flex flex-col gap-1 p-4" aria-label="Mobile navigation">
          <a href="#" aria-current="page" class="rounded-xl bg-indigo-50 px-4 py-3.5 text-base font-medium text-indigo-600 transition-colors duration-200">Dashboard</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-700 transition-colors duration-200 hover:bg-slate-100">Projects</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-700 transition-colors duration-200 hover:bg-slate-100">Analytics</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-700 transition-colors duration-200 hover:bg-slate-100">Resources</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-700 transition-colors duration-200 hover:bg-slate-100">Pricing</a>
          <a href="#" class="rounded-xl px-4 py-3.5 text-base font-medium text-slate-700 transition-colors duration-200 hover:bg-slate-100">Support</a>
        </nav>

<div class="mt-auto space-y-3 border-t border-slate-200 p-4">
          <div class="flex items-center gap-3 rounded-xl bg-slate-50 p-3">
            <img src="https://i.pravatar.cc/64?img=12" alt="User avatar" class="h-10 w-10 rounded-full object-cover" />
            <div>
              <p class="text-sm font-semibold text-slate-900">Ava Mitchell</p>
              <p class="text-xs text-slate-500">ava@TailwindFlex.io</p>
            </div>
          </div>
          <a href="#" class="flex items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 px-4 py-3 text-sm font-semibold text-white shadow-md shadow-indigo-500/30 transition-all duration-200 hover:shadow-lg active:scale-[0.98]">
            Upgrade Plan
          </a>
        </div>
      </div>
    </div>
  </nav>
</header>