Nav link | Brio

Examples

Basic usage

<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>

Variants

The default treatment is an underline: it fades in on hover and holds for the current page, while color shifts to the active token. is-pill swaps the signal for a fill -- hover and the current page ride on a background instead.

default

is-pill

<div class="flow">
        <div class="flow flow-space-sm">
            <h4>default</h4>
            <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>
            </nav>
        </div>
        <div class="flow flow-space-sm">
            <h4>is-pill</h4>
            <nav class="cluster" aria-label="Primary">
                <a href="#" class="nav-link is-pill" aria-current="page">Dashboard</a>
                <a href="#" class="nav-link is-pill">Projects</a>
                <a href="#" class="nav-link is-pill">Team</a>
            </nav>
        </div>
    </div>

With compositions

brio

<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>

Source comments

Nav link -- minimal link treatment for navigation contexts

Apply to <a> elements inside <nav> (or wherever a navigation-link
style is wanted) -- and to <button> elements that act as triggers
for popovers / dropdowns from inside a nav. Layout (cluster, stack,
flank, etc.) comes from compositions -- this is just the visual
treatment.

Active state: binds to [aria-current="page"] (PRINCIPLES.md P5).
The server or JS sets aria-current on the matching link; CSS never
relies on an is-active class for current-page state.

Visual: the default treatment is an underline that fades in on hover
and holds for the current page, with color shifting to the active
token. The fade runs on text-decoration-color, so the underline
appears without moving layout. .is-pill swaps the signal for a
fill -- hover and the current page ride on a background instead.
Tokens cover the rest -- colors, padding, and size are overridable
per-project without touching the rules.

Browser-button reset: <button> elements come with user-agent
styling (background, border, font, even text-rendering) that
differs across Chrome / Safari / Firefox. The reset properties
below normalize <button> to look like an <a> in this context. <a>
already has none of the resets to work against, so the same rule works
for both element types without conditional selectors.

Reference

Source: src/css/nav-link.css

Applies to

.nav-link

Classes

Class	Kind	Description
`.is-pill`	variant	Hover and the current page ride on a fill pill; the underline signal gives way to the background

Tokens

Token	Default	Description
`--nav-link-padding-block`	`var(--ui-pad-block-compact)`	Block-axis padding
`--nav-link-padding-inline`	`var(--ui-pad-inline-tight)`	Inline-axis padding
`--nav-link-font-size`	`var(--ui-font-size-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