Navbar Centered

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

centered.html

<header class="ws-navbar border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]">
  <div class="mx-auto max-w-7xl px-6">
    <div class="flex items-center justify-between py-4 lg:justify-start lg:gap-10">
      <a href="#" class="text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">Webspire</a>

      <nav aria-label="Primary" class="hidden flex-1 items-center justify-center gap-8 lg:flex">
        <a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Features</a>
        <a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Patterns</a>
        <a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Pricing</a>
        <a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Docs</a>
        <a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Blog</a>
      </nav>

      <div class="flex items-center gap-3">
        <a href="#" 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="#" 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>
  </div>
</header>

Details

Family

navbar

Tier

enhanced

Kind

section

Extends

navbar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

navbarcenterednavigationheaderbalanced

Slots

Name	Required	Description
logo	Yes	Brand logo or name.
nav	Yes	Centered navigation links.
actions	No	Sign in and CTA buttons.

Balanced navigation bar. Logo on the left, navigation links centered in the middle, and sign-in + CTA button on the right. Uses flex-1 for true centering. Nav links hidden on mobile.