Wiki Drawer (Mobile Navigation)

Slide-in overlay navigation for compact (≤799px) viewports. Hamburger trigger opens a full-height left drawer containing the wiki site nav. Uses HTML inert attribute to lock the background DOM.

Live previewrendered from recipe via {tokens} resolution
closed

Hamburger button only; drawer and backdrop [hidden].

open

Drawer slides in; backdrop dims; main content inert.

ARIA notes

Trigger button: aria-expanded (true/false), aria-controls='wiki-drawer', aria-label updates on state. Backdrop: aria-hidden='true' always. Drawer <nav aria-label='Site navigation'>. inert applied to #wiki-main-content and any other focusable regions when drawer is open — prevents Tab from escaping drawer.

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/wiki-drawer-mobile-nav.json.