Nav

Horizontal and vertical

<nav class="dsgn-nav" aria-label="Main example"><a class="dsgn-nav-link" href="#nav" aria-current="page">Features</a><a class="dsgn-nav-link" href="#nav">Pricing</a><a class="dsgn-nav-link" href="#nav">FAQ</a></nav>
<nav class="dsgn-nav" data-orientation="vertical" aria-label="App example" style="max-inline-size: 16rem"><span class="dsgn-nav-label">Workspace</span>
  <a class="dsgn-nav-link" href="#nav"><span class="dsgn-icon" aria-hidden="true">home</span>Overview</a><a class="dsgn-nav-link" href="#nav" aria-current="page"><span class="dsgn-icon" aria-hidden="true">receipt_long</span>Invoices<span class="dsgn-nav-meta">12</span></a></nav>

Usage

Links look like ghost neutral buttons: same height (Density), same radius, muted until hovered; the current page is base/text on neutral-subtle with a filled icon. Vertical: full width, text starts at the left edge, optional group labels (.dsgn-nav-label). text: no fill; muted links, the current one in full text colour and semibold. underline: a 2 px line under the whole link (accent for the current page, neutral on hover, sliding in); inside .dsgn-header it sits on the header's bottom edge.

Details

Classes

.dsgn-nav .dsgn-nav-link .dsgn-nav-meta .dsgn-icon .dsgn-nav-label

Tokens used

--dsgn-accent-solid --dsgn-border-strong --dsgn-control-font-size --dsgn-control-gap --dsgn-control-line-height --dsgn-control-pad-x --dsgn-control-pad-y --dsgn-duration --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-font-weight-regular --dsgn-font-weight-semibold --dsgn-line-height-caption --dsgn-neutral-subtle --dsgn-neutral-subtle-hover --dsgn-radius-m --dsgn-space-12 --dsgn-space-2 --dsgn-space-4 --dsgn-space-8 --dsgn-text --dsgn-text-muted

In Figma

Nav link

Import alone

dsgn.systems/components/nav.css