7 references · 60 captured

Nav bars

Top navigation rows.

01 · Inline minimal

N1 Inline

Wordmark left, links inline, utilities right. Utility cluster sits tighter than the nav links.

02 · Floating pill

N5 Floating pill

Centred pill nav that doesn't sit on a full-width band. Good over full-bleed heroes.

03 · Marginal

N7 Marginal

Vertical index in the left margin. Reads like a table-of-contents pulled into the chrome.

Page body

A marginal nav stays out of the way until you need it.

04 · Mega menu

N3 Mega

Top-level links reveal a multi-column panel on hover. For deep sites where flyouts get unwieldy.

05 · Off-canvas

N4 Drawer

Page leads with the wordmark and a menu affordance; full nav slides in from the right.

07 · Search-first

N9 Search-first

The search input IS the nav row. Common in archives and ⌘K-led products.

From the archive

The same pattern, cropped from real production sites.