Narrow Nav - Everyday Interface Patterns

A static narrow navigation fallback shows Navigation below header layout, Roadmap current item, Open navigation list fallback, and Narrow nav preview status.

Program

Narrow navigation can be readable as a static fallback without a drawer engine or media query listener.

narrow_nav_fallback.html

Visuals: captured from real browser rendering

<section class="narrow-nav" aria-labelledby="narrow-nav-title"><h2 id="narrow-nav-title">Narrow navigation fallback</h2><div class="phone-frame" aria-label="Static narrow navigation preview"><header>Header</header><nav aria-label="Static navigation below header"><span>Roadmap</span><span>Open navigation list</span></nav></div><dl>
  <div><dt>Layout</dt><dd>Navigation below header</dd></div>
  <div><dt>Current item</dt><dd>Roadmap</dd></div><div><dt>Fallback</dt><dd>Open navigation list</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Narrow nav preview</span></dd></div></dl>
  <p class="check">Learner check: the narrow layout names the current item and fallback.</p>
  <p class="note">Static narrow navigation 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>
  .narrow-nav { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .phone-frame { display: grid; gap: 8px; width: 230px; border: 1px solid #1d4ed8; background: #ffffff; padding: 10px; }
  .phone-frame header { border-radius: 6px; background: #bfdbfe; padding: 8px; font-weight: 700; }
  .phone-frame nav { display: grid; gap: 6px; }
  .phone-frame nav span { border-radius: 6px; background: #dbeafe; padding: 8px; }
  .narrow-nav dl { display: grid; gap: 8px; margin: 0; }
  .narrow-nav dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .narrow-nav dt { color: #475569; }
  .narrow-nav dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the narrow navigation fallback.
The section is labelled by its visible heading.
Show narrow navigation structure.
The static frame shows navigation below the header.
Show exact fallback rows.
The layout, current item, and fallback are exact pinned data.
Render narrow-nav-preview status.
The status badge says this is a narrow nav preview.
Check narrow nav readback.
The check says the narrow layout names the current item and fallback.
Check narrow navigation honesty.
Narrow structure, exact rows, status, and no live drawer.

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

fallback readback The section heading names the narrow navigation fallback surface.

fallback rows Layout, Current item, Fallback, and Status values are exact pinned data.

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