Nav rail

The navigation rail (.nav-rail) is a slim, always-visible vertical navigation strip anchored to the side of the viewport — a lighter-weight alternative to a full drawer. It is static and purely visual: every item is a plain <a> or <button> and there is no JavaScript wiring beyond normal link navigation.

<nav class="nav-rail" aria-label="Primary">
  <a class="nav-rail-item" href="#" aria-current="page">
    <span class="nav-rail-icon" aria-hidden="true">🏠</span>
    <span class="nav-rail-label">Home</span>
  </a>
  <a class="nav-rail-item" href="#">
    <span class="nav-rail-icon" aria-hidden="true">📊</span>
    <span class="nav-rail-label">Reports</span>
  </a>
  <a class="nav-rail-item" href="#">
    <span class="nav-rail-icon" aria-hidden="true">⚙</span>
    <span class="nav-rail-label">Settings</span>
  </a>
</nav>