Sidebar Current - Everyday Interface Patterns

A static sidebar group preview shows Projects group, Roadmap current item, Archive other item, and Sidebar preview status.

Program

Sidebar navigation should make the group and current item visible before any routing exists.

sidebar_group_current.html

Visuals: captured from real browser rendering

<section class="sidebar-current" aria-labelledby="sidebar-current-title"><h2 id="sidebar-current-title">Sidebar group current</h2><nav class="sidebar" aria-label="Static sidebar preview"><p class="group">Projects</p><span class="current" aria-current="page">Roadmap</span><span>Archive</span></nav><dl>
  <div><dt>Group</dt><dd>Projects</dd></div>
  <div><dt>Current item</dt><dd>Roadmap</dd></div><div><dt>Other item</dt><dd>Archive</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Sidebar preview</span></dd></div></dl>
  <p class="check">Learner check: the group and current item are visible without routing.</p>
  <p class="note">Static sidebar 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>
  .sidebar-current { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .sidebar { display: grid; gap: 6px; width: 180px; border: 1px solid #0f766e; background: #ffffff; padding: 10px; }
  .group { margin: 0; color: #475569; font-weight: 700; }
  .sidebar span { border-radius: 6px; padding: 8px; background: #ccfbf1; }
  .sidebar .current { outline: 2px solid #0f766e; font-weight: 700; }
  .sidebar-current dl { display: grid; gap: 8px; margin: 0; }
  .sidebar-current dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .sidebar-current dt { color: #475569; }
  .sidebar-current dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the sidebar current preview.
The section is labelled by its visible heading.
Show sidebar navigation structure.
The nav landmark is labelled as a static sidebar preview.
Show exact sidebar rows.
The group, current item, and other item are exact pinned data.
Render sidebar-preview status.
The status badge says this is a sidebar preview.
Check sidebar readback.
The check says the group and current item are visible without routing.
Check sidebar honesty.
Navigation structure, exact rows, status, and no live routing.

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

current item readback The section heading names the sidebar group current surface.

sidebar rows Group, Current item, Other item, and Status values are exact pinned data.

no live routing 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.