Navigationstable

Navbar

Sticky translucent site header with brand, uppercase links (aria-current marks the active page) and an actions slot; collapses by its own width.

Examples

Site header

HTML for “Site header”

<header class="mp-navbar">
  <div class="mp-navbar__inner">
    <a class="mp-navbar__brand" href="#components">D'Césares</a>
    <nav class="mp-navbar__nav" aria-label="Primary">
      <ul class="mp-navbar__links">
        <li><a class="mp-navbar__link" href="#components" aria-current="page">Work</a></li>
        <li><a class="mp-navbar__link" href="#components">Writing</a></li>
        <li><a class="mp-navbar__link" href="#components">Workshops</a></li>
        <li><a class="mp-navbar__link" href="#components">About</a></li>
      </ul>
    </nav>
    <div class="mp-navbar__actions">
      <a class="mp-button" href="#components" data-size="sm">See the work</a>
    </div>
  </div>
</header>

Guidance

The site header. Sticky, 64px tall (--size-nav), translucent with a --blur-backdrop blur, warm hairline at the bottom. It uses a container query, so it reflows based on its own width — on narrow widths the links move to a horizontally scrolling row under the brand.

Accessibility

Wrap links in <nav aria-label="Primary">; mark the current page with aria-current="page" (that attribute drives the active style).
Put a skip link before the navbar.
The brand link needs an accessible name (aria-label) when it holds a mark instead of text. On Isaac's own sites the brand is the inlined dc monogram, themed with the action tokens; see DESIGN-SYSTEM.md §10.6.
Links keep a 44px target height.

API

Navbar classes
Class	Kind
`.mp-navbar`	root
`.mp-navbar__inner`	part of `.mp-navbar`
`.mp-navbar__brand`	part of `.mp-navbar`
`.mp-navbar__nav`	part of `.mp-navbar`
`.mp-navbar__links`	part of `.mp-navbar`
`.mp-navbar__link`	part of `.mp-navbar`
`.mp-navbar__actions`	part of `.mp-navbar`

States styled: :focus-visible :hover [aria-current="page"]. Set the native attribute or ARIA state; there are no state classes.

Navbar component tokens
Token	Default	Light · dark
`--mp-navbar-bg`	`var(--color-bg-primary)`	`#FAF6EE` · `#1A1B1F`
`--mp-navbar-fg`	`var(--color-text-primary)`	`#2A2622` · `#F0EBE1`
`--mp-navbar-link`	`var(--color-text-secondary)`	`#5C564E` · `#A39D93`
`--mp-navbar-link-hover`	`var(--color-text-primary)`	`#2A2622` · `#F0EBE1`
`--mp-navbar-link-bg-hover`	`var(--color-bg-hover)`	`rgba(42, 38, 34, 0.06)` · `rgba(240, 235, 225, 0.06)`
`--mp-navbar-link-current`	`var(--color-human-text)`	`#944425` · `#E08A6A`
`--mp-navbar-indicator`	`var(--color-action-primary)`	`#B35530` · `#D4724F`

Design tokens consumed: --blur-backdrop --border-default --border-width-medium --color-action-primary --color-bg-hover --color-bg-primary --color-human-text --color-text-primary --color-text-secondary --container-xl --focus-ring --focus-ring-offset --font-sans --font-serif --radius-full --radius-sm --site-margin --size-nav --size-nav-mobile --size-touch-target --space-1 --space-2 --space-3 --space-4 --space-6 --space-8 --text-h4 --text-xs --tracking-heading --tracking-label --transition-fast --weight-bold --weight-semibold --z-nav

Verified contrast

The build measures each pair for the defaults and for every tone, variant and state that reassigns a token, over page and card surfaces. The ratios below are the worst case in each mode; a pair below its minimum stops the build.

Navbar contrast pairs
Use	Pair	Light	Dark	Minimum
brand	`--mp-navbar-fg` on `--mp-navbar-bg`	13.93	14.48	7.0
nav link	`--mp-navbar-link` on `--mp-navbar-bg`	6.73	6.39	4.5
nav link, hover	`--mp-navbar-link-hover` on `--mp-navbar-link-bg-hover`	12.51	12.52	4.5
current page link	`--mp-navbar-link-current` on `--mp-navbar-bg`	6.26	6.57	4.5
current page underline	`--mp-navbar-indicator` on `--mp-navbar-bg`	4.57	5.18	3.0

Source

README on GitHub CSS on GitHub Manifest (JSON)