Skip to content

Site header

Stable Available in release assets

Frame a site identity and its primary destinations in a resilient header landmark without owning routing or application state.

Site header in context

Show code
<header class="thin-site-header">
  <a data-site-brand href="/">Northline Journal</a>
  <nav class="thin-navigation-menu" aria-label="Primary">
    <ul>
      <li><a href="/stories/" aria-current="page">Stories</a></li>
      <li><a href="/field-notes/">Field notes from cooperatives and independent workshops</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </nav>
</header>

Each authored example uses the production assets and includes copyable markup.

The default header pairs a home link with a labelled primary navigation menu.

Show code
<header class="thin-site-header">
  <a data-site-brand href="/">Northline Journal</a>
  <nav class="thin-navigation-menu" aria-label="Primary">
    <ul>
      <li><a href="/stories/" aria-current="page">Stories</a></li>
      <li><a href="/field-notes/">Field notes from cooperatives and independent workshops</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </nav>
</header>

Brand, links, and call to action

A secondary action remains an ordinary link and does not replace the primary navigation landmark.

Show code
<header class="thin-site-header">
  <a data-site-brand href="/">Northline Journal</a>
  <nav class="thin-navigation-menu" aria-label="Primary">
    <ul>
      <li><a href="/stories/">Stories</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </nav>
  <a href="/subscribe/">Subscribe</a>
</header>

Wrapped narrow header

The header wraps intrinsically in narrow containers without changing source or focus order.

Show code
<header class="thin-site-header">
  <a data-site-brand href="/">Northline Journal</a>
  <nav class="thin-navigation-menu" aria-label="Primary">
    <ul>
      <li><a href="/stories/" aria-current="page">Stories</a></li>
      <li><a href="/field-notes/">Field notes from cooperatives and independent workshops</a></li>
    </ul>
  </nav>
</header>

Anatomy

  • Header landmark
  • Home link with a meaningful site name
  • Uniquely labelled navigation landmark
  • Semantic link list

Variants and sizes

  • Brand and links — shown above
  • Brand, links, and call to action — shown above
  • Wrapped narrow header — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Current page
  • Long localized brand
  • Long localized destination
  • Narrow container
  • Right-to-left content
  • Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Every destination is an ordinary link. The header wraps intrinsically and does not require a menu-toggle script.

Accessibility

Keep the site name meaningful, give each navigation landmark a distinct accessible name, preserve source and focus order, and mark only the current destination with aria-current.

Contract
DISCLOSURE
Basis
Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup
Evidence
  • tests/unit/library/content-navigation.test.ts
  • tests/unit/library/navigation-patterns.test.ts

API

Use header.thin-site-header, an ordinary home link marked data-site-brand, and one or more labelled nav landmarks. Use the separate Navigation menu primitive inside when disclosure is needed. Retired: header.thin-site-header (alias through pre-stable).

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The header remains a normal landmark containing a home link and complete navigation links without CSS or JavaScript.

Assets and dependencies

  • /foundation.css
  • /components.css

Dependencies: None

Source: packages/ui/src/items/navigation-patterns/style.ts

Stability evidence

  • Header landmark, brand link, labelled navigation menu, and no-JavaScript fixture: test:tests/unit/library/navigation-patterns.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/navigation-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review