CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / navigation-layout / mobile-navigation-drawer

Stable release
Back to category

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
Live canvasInstant token updates
Source filesEditable and export-ready
<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.