Patternbook

Navbar — Centered brand with three zones

A centered brand separates destination links on the left from account actions on the right.

1440 × 900

Open in new tab

Pattern notes

When to use
Use when a centered identity is important and the navigation is short. Pick a conventional left-brand bar for many links. Variations: replace account actions with search, use two destinations, or add a brief text descriptor below the brand.
Hierarchy
The centered brand anchors the bar, with three destination links and two account actions. Keep labels under 3 words and preserve one filled action.
Responsive
Below 768px the three zones stack in source order: destinations, brand, then account actions. Both link and action groups wrap to fit 320px viewports.
Layout
The max-w-6xl header has 24px padding and a 24px-gap grid. At 768px, equal flexible outer columns surround an auto-width brand; the action group aligns to the right. Primary actions remain 44px tall.
States
Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.
Desktop wireframe
┌──────────────────────────────────────────────────────────┐
│[Product] [Pricing] [Docs]      Logo      [Log in] [Start]│
└──────────────────────────────────────────────────────────┘

More in Navbar

View all Navbar patterns