Navigation bar

Page-level navigation header. Logo, primary nav, optional actions, optional account menu.

Live previewrendered from recipe via {tokens} resolution
ARIA notes

Mark the active page with aria-current='page'. The <nav> element with aria-label='Primary' is the canonical landmark for top-level navigation. Mobile collapse pattern (drawer) is subsequent-milestone work.

When to use Navigation bar

Use the navigation bar for top-level page navigation. One per application; appears at the top of every page.

The recipe ships a horizontal layout with logo + primary nav + optional actions area. Mobile collapse (hamburger drawer pattern) is subsequent-milestone work.

Mark the active page with aria-current="page".