Navbar Base

Fetch pattern JSON: curl https://webspire.de/patterns/navbar/base.json

base.html

<header class="ws-navbar sticky top-0 z-50 border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]/90 backdrop-blur">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
    <a href="#" class="text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">Webspire</a>
    <nav aria-label="Primary" class="hidden items-center gap-7 md:flex">
      <a href="#features" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Features</a>
      <a href="#pricing" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Pricing</a>
      <a href="#docs" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Docs</a>
    </nav>
    <div class="flex items-center gap-3">
      <a href="#login" class="hidden text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)] sm:inline">Sign in</a>
      <a href="#start" class="rounded-lg bg-[var(--ws-navbar-active)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90">Get started</a>
    </div>
  </div>
</header>

Details

Family

navbar

Tier

base

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

navigationheadernavbarstickysaas

Slots

Name	Required	Description
brand	Yes	Product or company logo area.
links	Yes	Primary navigation links.
actions	No	Login and CTA buttons.

Props

Name	Type	Default	Description
sticky	boolean	true	Pins navbar to top during scroll.
maxWidth	string	max-w-7xl	Container width utility.

Base navigation for the Navbar family. Start here and add search, mega-menu, or mobile drawer as derivatives.