Skip to content
Design Token Authority

Nav

The main navigation of a page. On tablets and desktops its links sit in a row, followed by the controls passed to it (the theme switch). Below 760px a burger button opens them as a full-screen menu.

Links, or a menu button on phones

Light
Graphite

Story: /stories/nav/default/

Menu open on a phone, Docs the page shown

Light
Graphite

Story: /stories/nav/open/

The page you are on: Playground

Light
Graphite

Story: /stories/nav/current/

The examples on this page are wide, so they show the row; open the story of “Menu open on a phone” at phone width to see the menu.

Guidelines

Section titled “Guidelines”
  • Four links or fewer, labelled with the place they lead to (“Docs”), not an action. With so few links, tablets keep the row.
  • The burger has no outline until it is hovered or focused, and turns into a cross while the menu is open. Its accessible name says what it does (“Menu”, “Close menu”).
  • The menu is a disclosure that takes the whole screen: the page behind it does not scroll, focus stays inside it, Escape closes it and returns focus to the button, and so does following a link.
  • Motion follows the motion rule on the motion tokens: the sheet wipes down (slow, enter) and back up (base, exit), a redline draws under the header, the links rise one after another (motion.stagger). Reduced motion shows the menu at once.
  • The page you are on is marked: its link has aria-current="page" and keeps an underline in action-bg at stroke-ink (the row), or under its label (the menu); the words stay fg-default, so the mark never costs contrast, and a hover’s ink underline does not replace it. Pass current: true on that link. Links to sections of a page (#how) are never current, also on that page: the landing page marks none, the playground marks “Playground”. The docs have Starlight’s own header and sidebar, which mark the page there.
  • Links and the button are at least 44px high, so they work as touch targets.

Tokens used

Section titled “Tokens used”

Read from the component’s source:

--action-bg--action-subtle--bg-canvas--border-default--border-strong--fg-default--font-mono--font-sans--i--motion-duration-base--motion-duration-fast--motion-duration-instant--motion-duration-slow--motion-ease-enter--motion-ease-exit--motion-ease-standard--motion-stagger--radius-full--radius-md--radius-sm--signal-bg--space-16--space-2--space-3--space-4--space-6--space-8--stroke-focus--stroke-hairline--stroke-ink--stroke-redline--type-heading-line-height--type-heading-size--type-heading-weight--type-label-line-height--type-label-size--type-label-weight--type-meta-size--type-meta-weight