Navbar — Centred masthead

Utility links, a centred identity and a ruled topic row form a three-level masthead. Use it when the identity deserves more space than navigation.

ReactHTML

1440 × 900

Open in new tab

Component.tsx111 lines

export default function NavbarCenteredMasthead() {
  return (
    <header className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6">
        <div className="flex h-10 items-center justify-end gap-6 sm:justify-between">
          <p className="hidden text-sm text-neutral-500 sm:block">
            <time dateTime="2026-10-10">Oct 10, 2026</time>
          </p>
          <nav aria-label="Account navigation" className="flex items-center gap-6">
            <a
              href="#"
              className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Subscribe
            </a>
            <a
              href="#"
              className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Sign in
            </a>
          </nav>
        </div>
        <div className="py-8 text-center">
          <a
            href="#"
            aria-label="Logo home"
            className="inline-flex shrink-0 items-center gap-2 font-semibold text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-3xl tracking-tight sm:text-4xl"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-6"
            >
              <rect x="4" y="4" width="16" height="16" rx="3" />
              <path d="M4 12h16M12 4v16" />
            </svg>
            Logo
          </a>
          <p className="mt-2 text-sm text-neutral-600">One-line descriptor for the content and its audience</p>
        </div>
        <nav aria-label="Topics" className="border-y border-neutral-200 py-4">
          <ul role="list" className="flex flex-wrap justify-center gap-x-6 gap-y-3">
            <li>
              <a
                href="#"
                aria-current="page"
                className="text-sm font-semibold text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Latest
              </a>
            </li>
            <li>
              <a
                href="#"
                className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Topics
              </a>
            </li>
            <li>
              <a
                href="#"
                className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Guides
              </a>
            </li>
            <li>
              <a
                href="#"
                className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Stories
              </a>
            </li>
            <li>
              <a
                href="#"
                className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Events
              </a>
            </li>
            <li>
              <a
                href="#"
                className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                About
              </a>
            </li>
            <li>
              <a
                href="#"
                className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Help
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

Pattern notes

When to use: Use for a publication or archive with a prominent identity and topic navigation. Choose navbar-two-row-search when search leads. Variations: show edition metadata, reduce topics to five, or add a utility announcement.
Hierarchy: Logo dominates, then seven 14px topics and utility metadata. Limit tagline to 10 words, topics to 1 word; use standard Subscribe and Sign in labels. Latest carries aria-current.
Responsive: Below 640px the date hides, utilities align right and the wordmark is 30px (text-3xl). From 640px the date returns and the wordmark is 36px (text-4xl). Topics wrap into centred lines at every width.
Layout: A white header uses a 1152px max-w-6xl container with 24px side padding. The utility row is 40px tall and justified. The identity block has 32px vertical padding, a 24px glyph beside a 36px wordmark and a 14px tagline 8px below. A centred topic nav has neutral-200 top and bottom hairlines, 16px vertical padding, 24px column gaps and 12px row gaps.
States: Text links hover from neutral-900 to neutral-600. The current topic stays semibold. All regions are static. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Oct 10, 2026                             Subscribe  Sign in  │
│                                                              │
│                             Logo                             │
│                   One-line identity descriptor               │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│  Latest   Topics   Guides   Stories   Events   About   Help  │
└──────────────────────────────────────────────────────────────┘

View all

Navbar — Announcement, search and categories
Layout tags: stacked,row,form
Navbar — App header with tabs
Layout tags: stacked,row,compact
Navbar — Brand beside stacked navigation
Layout tags: asymmetric,row,compact

Navbar — Centred masthead

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — App header with tabs

Navbar — Brand beside stacked navigation