Rail Labels - Everyday Interface Patterns

A static collapsed rail preview shows 64 px rail width, Home active item, Home label available, and Collapsed rail preview status.

Program

Collapsed rails still need readable labels so the active item is not icon-only guesswork.

collapsed_rail_labels.html

Visuals: captured from real browser rendering

<section class="rail-labels" aria-labelledby="rail-labels-title"><h2 id="rail-labels-title">Collapsed rail labels</h2><nav class="rail" aria-label="Static collapsed rail preview"><span class="rail-width">64 px</span><span class="active" aria-current="page">Home</span><span class="label">Label: Home</span></nav><dl>
  <div><dt>Rail width</dt><dd>64 px</dd></div>
  <div><dt>Active item</dt><dd>Home</dd></div><div><dt>Label available</dt><dd>Home</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Collapsed rail preview</span></dd></div></dl>
  <p class="check">Learner check: the collapsed rail still exposes a readable Home label.</p>
  <p class="note">Static collapsed rail preview only; no router, route change, drawer engine, menu engine, focus trap, click handler, keyboard handler, media query listener, ResizeObserver, navigation mutation, active-link calculation, API, network, storage, cookie, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live sidebar, live drawer, live menu, live routing, or live submission runs.</p></section>
<style>
  .rail-labels { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #7c3aed; padding: 12px; background: #f5f3ff; }
  .rail { display: grid; gap: 6px; width: 64px; border: 1px solid #7c3aed; background: #ffffff; padding: 8px; justify-items: center; }
  .rail span { border-radius: 6px; background: #ede9fe; padding: 6px; text-align: center; overflow-wrap: anywhere; }
  .rail .active { outline: 2px solid #7c3aed; font-weight: 700; }
  .rail .label { width: 9rem; justify-self: start; margin-left: 76px; }
  .rail-labels dl { display: grid; gap: 8px; margin: 0; }
  .rail-labels dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .rail-labels dt { color: #475569; }
  .rail-labels dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ede9fe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the collapsed rail preview.
The section is labelled by its visible heading.
Show collapsed rail structure.
The nav landmark is labelled as a static collapsed rail preview.
Show exact rail rows.
The rail width, active item, and label value are exact pinned data.
Render collapsed-rail-preview status.
The status badge says this is a collapsed rail preview.
Check rail label readback.
The check says the collapsed rail still exposes a readable Home label.
Check rail honesty.
Rail structure, exact rows, status, and no live menu.

step flow step(1) labels the source, step(2) shows the browser rail structure, step(3) shows exact rail rows, step(4) shows collapsed-rail-preview status, step(5) checks label readback, and step(6) checks the honesty note.

label readback The section heading names the collapsed rail labels surface.

rail rows Rail width, Active item, Label available, and Status values are exact pinned data.

no live menu engine The lesson should not imply routers, route changes, drawer engines, menu engines, focus traps, click handlers, keyboard handlers, media query listeners, ResizeObserver, navigation mutations, active-link calculations, APIs, networks, storage, cookies, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live sidebars, live drawers, live menus, live routing, or live submissions.