Tree

Basic — try it (keyboard: Tab, then Enter/Space)

The active node carries aria-current="page" — same convention as the sidebar. Branch state is two-channel for free: the chevron rotation is the visible cue, the native <details> open/closed semantics are the programmatic one. Server-render open on every ancestor of the current node so a deep link lands expanded.

When you'd need a real TreeView instead

This component covers hierarchy navigation: each label and link is an ordinary Tab stop, clicking a leaf navigates. If you're building a file-manager-style selection tree — single Tab stop, arrow-key traversal, multi-select, typeahead — that's the WAI-ARIA APG TreeView pattern: a genuinely different, heavier composite widget (role="tree", roving tabindex) that this framework doesn't ship — and it's what a BOM picker (select components, check for costing, drag to restructure) actually needs, which is why BOM explorers are deliberately NOT claimed above. The split mirrors the data table's Simple vs. Advanced tiers — don't take the heavy widget when links and disclosures already do the job.

Markup

<nav aria-label="Cost centers">
  <ul class="bo-tree">
    <li>
      <details class="bo-tree__branch" open>
        <summary class="bo-tree__label">Operations</summary>
        <ul>
          <li><a class="bo-tree__link" href="#" aria-current="page">CC-4021 — Warehouse</a></li>
          <li><a class="bo-tree__link" href="#">CC-2205 — Logistics</a></li>
          <li>
            <details class="bo-tree__branch">
              <summary class="bo-tree__label">Facilities</summary>
              <ul>
                <li><a class="bo-tree__link" href="#">CC-1180 — Maintenance</a></li>
                <li><a class="bo-tree__link" href="#">CC-1181 — Security</a></li>
              </ul>
            </details>
          </li>
        </ul>
      </details>
    </li>
    <li>
      <details class="bo-tree__branch">
        <summary class="bo-tree__label">Finance</summary>
        <ul>
          <li><a class="bo-tree__link" href="#">CC-3390 — Accounting</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

Quick reference generated

State attributes: aria-current

API generated from CSS

• Native <details>/<summary> carries the open/closed contract — no JS behavior exists because none is needed.
• Server-render open on every ancestor <details> of the aria-current node so deep links land expanded.
• Indentation is an em-based logical property — it scales with density and mirrors under RTL for free.
• Navigation, not selection: for a single-tab-stop, arrow-key, multi-select tree (file managers), use the WAI-ARIA APG TreeView pattern — deliberately not shipped here.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 99 · Firefox 128 · Safari 17.4

Alignment scored

2026-08-23

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.1.0. The floor is derived from this component's stylesheet alone — set by @layer — 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.