Sidebar navigation

Usage

Use the side nav for the pages inside one area of Fleetline when there are more than five (the workshop: work orders, inspections, parts, vehicles, mechanics). For the 4–6 top-level areas use the top nav.

• Group links into titled sections; nest at most two levels with a disclosure (<details>).
• Labels are nouns for places, ≤ 3 words. Counts say what they count in nearby text or the page ("4" inspections due today).
• The collapsed rail keeps every destination reachable by icon and tooltip; use it on narrow desktops, not on phones (use the top-nav panel there).

Anatomy

1. Collapse button — .side-nav__collapse (aria-expanded)
2. Section heading — .side-nav__heading
3. Link — a.side-nav__link with icon, label, optional count
4. Nested group — details.side-nav__group + summary.side-nav__summary + chevron
5. Current indicator — inline-start bar, selected fill, semibold (aria-current="page")

Examples

Section headings use the next heading level of the page (h2 in an app shell; h4 inside this docs page). States marked hover, focus-visible and active are frozen with .is-hover, .is-focus-visible, .is-active. Those classes share their rule with the real pseudo-class, so what you see is exactly what users get. Never use them in product code.

<nav class="side-nav" aria-label="Workshop" data-persist="fleetline-side-nav">
  <div class="side-nav__header">
    <button type="button" class="icon-btn icon-btn--sm side-nav__collapse" aria-expanded="true" aria-label="Collapse navigation">
      <svg class="icon-btn__icon side-nav__collapse-icon" aria-hidden="true" focusable="false"><use href="#icon-panel-left-close"></use></svg>
    </button>
  </div>
  <div class="side-nav__section">
    <h2 class="side-nav__heading" id="nav-workshop">Workshop</h2>
    <ul class="side-nav__list" aria-labelledby="nav-workshop">
      <li><a class="side-nav__link" href="/workshop">…<span class="side-nav__label">Overview</span></a></li>
      <li>
        <details class="side-nav__group" open>
          <summary class="side-nav__link side-nav__summary">…<span class="side-nav__label">Work orders</span>…</summary>
          <ul class="side-nav__list side-nav__list--nested">
            <li><a class="side-nav__link" href="/work-orders/open" aria-current="page"><span class="side-nav__label">Open work orders</span></a></li>
          </ul>
        </details>
      </li>
      <li><a class="side-nav__link" href="/inspections">…<span class="side-nav__label">Inspections</span><span class="side-nav__count">4</span></a></li>
    </ul>
  </div>
</nav>
<script type="module">import { init } from "./js/side-nav.js"; init();</script>

API

Do and don't

Accessibility

• Landmark: <nav> with a unique aria-label ("Workshop"), different from the top nav's "Main".
• Collapsed rail: labels are clipped, not removed, so link names don't change; js/side-nav.js adds title tooltips.
• Current page: bar + fill + weight. A group containing the current page shows its summary in bold.
• Forced colors: the current bar uses Highlight.

Tokens