Open experiment
Mobile navigation drawer
A purpose-built mobile navigation drawer with a large touch target, explicit close button, focus restoration, and Escape-key behavior.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-mobile-drawer">
<button class="cmp-mobile-drawer__open" type="button" aria-haspopup="dialog">Open menu</button>
<div class="cmp-mobile-drawer__backdrop" hidden></div>
<aside
class="cmp-mobile-drawer__panel"
role="dialog"
aria-modal="true"
aria-label="Site navigation"
hidden
>
<div class="cmp-mobile-drawer__head">
<strong>Northstar</strong
><button class="cmp-mobile-drawer__close" type="button">Close</button>
</div>
<nav aria-label="Mobile navigation">
<a href="#services">Services</a><a href="#projects">Projects</a><a href="#about">About</a
><a href="#contact">Contact</a>
</nav>
<p>Available Monday–Friday, 8am–6pm.</p>
</aside>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Focus moves to the close button.
- The backdrop closes the drawer.
- Page scrolling is restored after close.
License: MIT License for open-source use, modification, and distribution.