Global navigation bar

Usage

The top nav is the app header on every Fleetline screen: product logo (home), the 4–6 main areas, search, notifications and the profile menu. Use the side nav for the second level inside an area (e.g. the workshop sections).

• Link labels are short nouns for places: "Dispatch", "Work orders". Don't put actions ("New work order") in the nav — they go in the page header.
• The current area is marked with aria-current="page" plus weight and a bar.
• Notification counts go in the name ("Notifications, 3 unread").
• Sticky variant: set html { scroll-padding-top } to the bar height so focused elements aren't hidden under it.
• The layout reacts to its own width (container query at 48rem), so it also collapses in narrow split views on desktop.

Anatomy

1. Menu toggle — .top-nav__toggle (narrow only)
2. Brand — a.top-nav__brand to the home dashboard
3. Main nav — nav.top-nav__nav[aria-label=Main] with .top-nav__link items
4. Search — form.top-nav__search[role=search]
5. Actions — notifications .icon-btn and the profile menu button

Examples

Resize the window, or compare the narrow demos, to see the collapsed layout. 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.

<header class="top-nav top-nav--sticky">
  <div class="top-nav__bar">
    <button type="button" class="btn btn--ghost top-nav__toggle" aria-controls="main-nav-panel">
      <svg class="btn__icon" aria-hidden="true" focusable="false"><use href="#icon-menu"></use></svg>
      <span class="btn__label">Menu</span>
    </button>
    <a class="top-nav__brand" href="/">…Fleetline</a>
    <div class="top-nav__panel" id="main-nav-panel">
      <nav class="top-nav__nav" aria-label="Main">
        <ul class="top-nav__list">
          <li><a class="top-nav__link" href="/dispatch">Dispatch</a></li>
          <li><a class="top-nav__link" href="/work-orders" aria-current="page">Work orders</a></li>
          …
        </ul>
      </nav>
      <form class="top-nav__search" role="search" action="/search">
        <label class="sr-only" for="q">Search vehicles and work orders</label>
        <svg class="top-nav__search-icon" aria-hidden="true" focusable="false"><use href="#icon-search"></use></svg>
        <input class="top-nav__search-input" id="q" type="search" name="q" placeholder="Plate, VIN or WO number">
      </form>
    </div>
    <div class="top-nav__actions">
      <button type="button" class="icon-btn" aria-label="Notifications, 3 unread">…</button>
      <!-- profile: menu button, see menu.html -->
    </div>
  </div>
</header>
<script type="module">
  import { init as nav } from "./js/top-nav.js"; import { init as menus } from "./js/menu.js";
  nav(); menus();
</script>

API

Do and don't

Accessibility

• Landmarks: <header> is the banner at page level; the links are in <nav aria-label="Main">; search is role="search" with a real (visually hidden) label.
• Without JavaScript the Menu button stays hidden and the panel is open, so navigation always works.
• Mobile links are 44px tall (--size-touch-target).
• Forced colors: the current link adds an underline because box-shadow bars disappear.

Tokens