Sidebar navigation

Both rail states, in real shells

These are iframes, and they have to be. The rail collapses under @container bo-shell (max-width: 56rem), so it answers to the width of its shell, not the viewport. A demo inline on this page has no such container, so it rendered the expanded rail at every width — including 390 — and the state the component is most interesting for could not be shown at all. A frame gives the demo its own document and its own container, so the two panes above differ by nothing but how wide their shell is. Drag the browser narrow and they stay as they are; that is the point.

Grouped sections in an embedded shell

How many entries fit before the top group scrolls away. The rail is one scrolling column, so a long second group pushes the first out of view — and the first group is usually the one you need from anywhere (the modules). Measured on a real suite shell with 7 module entries: at a 900px-tall viewport the modules stay visible up to 11 entries in the second group and are gone by 17; on a 700px laptop the limit is 11. If a group needs more than that, the answer is not a taller rail — move the long list into the page (a tab strip or an anchor bar belongs to the screen, not the chrome), or split the module. A second, narrower icon rail is what large suites use, and this framework deliberately does not ship one yet: no screen here has hit the limit, and adding a column to .bo-app-shell — the most-composed layout in the framework — on a hypothetical is how a grid grows a slot nobody fills (roadmap 130.2, GAP-1).

A label longer than the rail

A label wider than the rail wraps onto another line. It is not truncated and it does not widen the rail. Wrapping is the deliberate choice: an ellipsis hides the part of a name that distinguishes it — "Accessibility Conformance…" and "Accessibility Conformance Report" read alike — and letting the label push the rail wider puts a horizontal scrollbar inside the navigation, so a reader has to drag sideways to finish reading a link. Both were real: this rail spilled 15.7px and scrolled until it was fixed. Nothing here is configurable, so long module names are safe to use without measuring them first.

On a narrow screen you are seeing icons, not wrapped text, and that is the same rule as above rather than an exception to it: this demo sits inside the docs' own app shell, so when that shell is narrow the rail collapses to icon-only and every label is visually hidden — wrapping only applies where there are labels to wrap. Widen the window to see it.

Markup

<nav class="bo-sidebar-nav bo-app-shell__sidebar" aria-label="Main">
  <div class="bo-sidebar-nav__section">
    <div class="bo-sidebar-nav__heading">Purchasing</div>
    <ul>
      <li><a class="bo-sidebar-nav__link" href="/invoices" aria-current="page">
        <span class="bo-icon bo-icon--invoice bo-sidebar-nav__icon" aria-hidden="true"></span>
        <span class="bo-sidebar-nav__label">Invoices</span>
      </a></li>
    </ul>
  </div>
</nav>

Quick reference generated

State attributes: aria-current

API generated from CSS

• The current page carries aria-current="page" — that is the programmatic channel; the visual highlight is the other half.
• Icons are aria-hidden and labels stay in the accessibility tree when the rail collapses, so a screen-reader user never loses the link text.
• Collapse is driven by a named container query on the shell — the same sidebar behaves correctly inside a split view, which a media query cannot do.
• Sections (__section + __heading) group modules; headings hide with the labels when the rail collapses.

Maturity generated

Introduced

v0.3.0

CSS floor

Chrome/Edge 105 · Firefox 110 · Safari 16

Alignment scored

2026-08-23

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.3.0. The floor is derived from this component's stylesheet alone — set by @container — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (18/18) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-23.