Navbar

Simple, clean navbars with BLT branding and clear actions.

Contribute

Full Logo Navbar

<nav class="rounded-xl border border-slate-200 bg-white px-4 py-3">
  <img src="/docs/assets/img/logo-lg.png" alt="BLT Logo" class="w-[15%]" />
  <div class="flex items-center gap-3">
    <a href="#" class="text-sm text-slate-600 hover:text-slate-900">Docs</a>
    <a href="#" class="text-sm text-slate-600 hover:text-slate-900">Issues</a>
    <button class="rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white hover:bg-[#c10000]">Submit Report</button>
  </div>
</nav>

Compact Logo Navbar

<nav class="rounded-lg border border-slate-200 bg-white shadow-sm">
  <div class="flex h-16 items-center justify-between px-4">
    <div class="flex items-center">
      <img src="/docs/assets/img/logo-sm.png" alt="BLT Small Logo" class="mr-2 h-8 w-8" />
      <h1 class="text-xl font-bold text-gray-900">BLT-Navbar</h1>
    </div>
    <a href="https://github.com/OWASP-BLT" class="rounded-lg bg-red-600 px-5 py-3 font-semibold text-white hover:bg-[#c10000]">
      <i class="fab fa-github mr-2"></i>Contribute
    </a>
  </div>
</nav>