Nav link

Horizontal navigation link

Intent

Nav link is a minimal link treatment for horizontal navigation -- a site header, a secondary tab bar, a breadcrumb-style row. It shows a native underline on hover and on the current page, with a color transition to a primary tone. Layout comes from composition (.cluster most often); nav-link owns only the visual treatment.

For vertical navigation (sidebar primary nav with grouped sections, collapsible subtrees), use sidebar-nav. Nav link is built for inline rows and reads awkwardly when stacked vertically -- compact padding and short underlines are tuned for horizontal scanning.

Basic usage

Wrap a group of links in a <nav> landmark, lay them out with .cluster, and add .nav-link to each <a>. Mark the current page with aria-current="page" -- the attribute paints the active color and underline, and screen readers announce it as the current item (P5).

<docs-resize>
    <nav class="cluster" aria-label="Primary">
        <a href="#" class="nav-link" aria-current="page">Dashboard</a>
        <a href="#" class="nav-link">Projects</a>
        <a href="#" class="nav-link">Team</a>
        <a href="#" class="nav-link">Settings</a>
    </nav>
</docs-resize>

With compositions

Nav link is an atom -- it doesn't own its container. The common shape is a site header: brand on one side, nav on the other, joined by .cluster.is-between. Two children get pushed to opposite ends; the inner cluster keeps the nav links tight against each other.

brio

<docs-resize>
    <header class="cluster is-between">
        <strong>brio</strong>
        <nav class="cluster" aria-label="Primary">
            <a href="#" class="nav-link" aria-current="page">Docs</a>
            <a href="#" class="nav-link">Components</a>
            <a href="#" class="nav-link">GitHub</a>
        </nav>
    </header>
</docs-resize>

Class reference

Selector	Role
`.nav-link`	Atom on an `<a>`. Owns color, padding, font size, and the animated underline; no layout of its own.
`.nav-link[aria-current="page"]`	Current-page state. Shows the active color and underline permanently.
`.nav-link:hover`	Same active color and underline as the current state.
`.nav-link:focus-visible`	Keyboard focus outline.

Customization

Override tokens on a <nav> ancestor to retone a whole row in one place, or on a single link for a one-off. Full token list and defaults: src/css/nav-link.css.

Accessibility

Wrap in a <nav> landmark. Screen readers expose <nav> in their landmark rotor, letting users jump to navigation regions. A bare .cluster of links still works visually but misses the landmark; give every nav an aria-label when more than one exists on the page so they're distinguishable ("Primary", "Footer", "In-page").
Use aria-current for the current page. Not .is-active. The attribute is the announcement; the CSS selector is just styling the semantics (P5). page is the right value for site nav; step for a wizard; location for a breadcrumb waypoint.
Meaningful link text. Nav links announce out of context when a screen-reader user rotor-jumps through them. Docs, Projects, Settings read well alone; Click here doesn't.

CSS Reference: Nav Link

Minimal link treatment for navigation contexts

Source: src/css/nav-link.css

Tokens

Token	Default	Description
`--nav-link-padding-y`	`var(--ui-pad-y-compact)`	Vertical padding
`--nav-link-padding-x`	`var(--ui-pad-x-tight)`	Horizontal padding
`--nav-link-font-size`	`var(--ui-text-sm)`	Font size for the link
`--nav-link-color`	`var(--color-text)`	Text color at rest
`--nav-link-color-active`	`var(--color-primary)`	Text color on hover and for the current page

Classes

Class	Description
`.nav-link`	component root