FinTech Banking Navbar with Trust Bar & Mobile Sidebar

A clean, enterprise-grade banking navigation bar built with pure HTML and Tailwind CSS. It features a trust announcement bar, responsive navigation, loan dropdown, secure call-to-action buttons, and a mobile sidebar. Perfect for fintech platforms, digital banks, insurance providers, investment firms, lending platforms, and financial service websites.

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 Navigations Navbar

Author JUGENDRA GANGWAR

Tailwind v3.4 324 3

Fork Fullscreen

<header class="w-full bg-white">
  <div class="hidden items-center justify-center gap-2 border-b border-slate-100 bg-slate-50 py-2 sm:flex">
    <svg class="h-3.5 w-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 4.556-3.04 8.13-7.21 9.51-.32.1-.66.1-.98 0C8.64 20.13 5.6 16.556 5.6 12V6.317a1 1 0 01.629-.928l5.4-2.16a1 1 0 01.742 0l5.4 2.16a1 1 0 01.629.928V12z" />
    </svg>
    <p class="text-xs font-medium text-slate-600">FDIC insured up to $250,000 &middot; Bank-level 256-bit encryption</p>
  </div>

<nav class="border-b border-slate-200" aria-label="Main navigation">
    <div class="mx-auto flex h-[4.5rem] max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
      <a href="#" class="flex items-center gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 rounded-lg">
        <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-700">
          <svg class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.5l3-9 3 9m-6 0h6m6-9v15m0 0l3-3m-3 3l-3-3m-9-3h.008v.008H6V16.5z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.5a3 3 0 106 0 3 3 0 00-6 0z" />
          </svg>
        </span>
        <span class="text-lg font-bold tracking-tight text-slate-900">Veridian</span>
      </a>

<ul class="hidden items-center gap-1 lg:flex">
        <li>
          <a href="#" aria-current="page" class="rounded-lg px-3.5 py-2 text-sm font-semibold text-blue-700 transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
            Personal Banking
          </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:bg-slate-50 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
            Business
          </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:bg-slate-50 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
            Investing
          </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:bg-slate-50 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
            Loans
            <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-60 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-blue-50 hover:text-blue-700">Mortgages</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-blue-50 hover:text-blue-700">Auto Loans</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-blue-50 hover:text-blue-700">Personal Loans</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:bg-slate-50 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
            Security
          </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:bg-slate-50 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
            Support
          </a>
        </li>
      </ul>

<div class="flex items-center gap-3">
        <a href="#" class="hidden rounded-lg px-3.5 py-2 text-sm font-semibold text-slate-700 transition-colors duration-200 hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 sm:inline-flex">
          Log In
        </a>
        <a href="#" class="hidden items-center justify-center rounded-lg bg-blue-700 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-blue-700/20 transition-all duration-200 hover:bg-blue-800 hover:shadow-md hover:shadow-blue-700/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 sm:inline-flex">
          Open Account
        </a>

<div class="pointer-events-none fixed inset-y-0 right-0 z-50 w-full max-w-xs translate-x-full transform border-l border-slate-200 bg-white shadow-2xl transition-transform duration-300 ease-out peer-checked:pointer-events-auto peer-checked:translate-x-0 lg:hidden">
          <div class="flex h-[4.5rem] items-center justify-between border-b border-slate-200 px-5">
            <span class="text-base font-bold text-slate-900">Veridian</span>
            <label for="fin-nav-toggle" class="cursor-pointer rounded-lg p-2 text-slate-500 transition-colors duration-200 hover:bg-slate-50 hover:text-slate-700" aria-label="Close menu">
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </label>
          </div>

<nav class="flex flex-col gap-1 p-4" aria-label="Mobile navigation">
            <a href="#" aria-current="page" class="rounded-xl bg-blue-50 px-4 py-3.5 text-base font-semibold text-blue-700">Personal Banking</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-50">Business</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-50">Investing</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-50">Loans</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-50">Security</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-50">Support</a>
          </nav>

<div class="mt-auto space-y-3 border-t border-slate-200 p-4">
            <div class="flex items-center gap-2 rounded-xl bg-slate-50 p-3">
              <svg class="h-4 w-4 shrink-0 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 4.556-3.04 8.13-7.21 9.51-.32.1-.66.1-.98 0C8.64 20.13 5.6 16.556 5.6 12V6.317a1 1 0 01.629-.928l5.4-2.16a1 1 0 01.742 0l5.4 2.16a1 1 0 01.629.928V12z" />
              </svg>
              <p class="text-xs font-medium text-slate-600">FDIC insured &middot; 256-bit encryption</p>
            </div>
            <a href="#" class="flex items-center justify-center rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 transition-colors duration-200 hover:bg-slate-50">
              Log In
            </a>
            <a href="#" class="flex items-center justify-center rounded-xl bg-blue-700 px-4 py-3 text-sm font-semibold text-white shadow-sm shadow-blue-700/20 transition-all duration-200 hover:bg-blue-800 active:scale-[0.98]">
              Open Account
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>