Component 21 · Complete

Header
and Navigation

Combines brand, primary destinations, and global actions with container alignment and a resilient compact state.

Default

Keep primary destinations visible

Desktop Navigation stays exposed and the shared Container aligns the brand, links, and actions.

NNikba

Compact

Collapse links behind one clear control

The compact panel opens below the Header without reserving empty page space. Escape, link selection, and an outside pointer action close it.

NNikba

Current destination

Expose location without extra decoration

One link uses `aria-current="page"` and a quiet surface to communicate the current destination visually and semantically.

Surface variants

Choose depth from page behavior

Use the solid Header by default. Sticky keeps global Navigation available, while Glass uses the active glass tokens over moving content.

DefaultSolid surface
StickyViewport anchored
GlassContext visible below

Lifecycle

Enhance a complete fallback

Before initialization, compact links remain visible. JavaScript adds the disclosure state and removes outside listeners immediately after closing.

InitializeinitNavigations(root)
Observends:navigation-change
Removecleanup()

Usage guidance

Keep the global model stable.

Reserve Header space for product identity, primary destinations, and a few global actions. Move local controls into the page.

Next component: Breadcrumb and Pagination