COMPONENTS

Navigation rail

A compact native nav with visible labels and optional existing SVG icons. One structural class, no additional attributes.

Usage

Markup: nav.nav-rail > a

Behaviour: Vertical rail becomes a wrapping horizontal layout below 40rem.

  • Use nav.nav-rail with direct anchors and an accessible navigation label. Use aria-current=page only for an actual current page; ordinary fragment links are not automatically tracked by CSS.
  • Labels stay visible. Existing SVG icons are decorative and should use aria-hidden=true. Navigation uses ordinary browser keyboard and link behaviour.
  • The rail is vertical on wider viewports and wraps horizontally below 40rem. It does not change the app shell or sidebar. Place it as an alternative navigation layout, not a second set of required sidebar controls.

Component API and styling module · Inherited appearance settings

Compact navigation

Native anchors with visible text.

Overview

Projects

Activity

HTMLSelect text to copy
<nav class="nav-rail" aria-label="Workspace">
  <a href="#rail-overview">Overview</a>
  <a href="#rail-projects">Projects</a>
  <a href="#rail-activity">Activity</a>
</nav>
<section id="rail-overview"><h3>Overview</h3></section>
<section id="rail-projects"><h3>Projects</h3></section>
<section id="rail-activity"><h3>Activity</h3></section>