EMBEDDED PREVIEW

Click to open the panel

This page is sandboxed inside the demo on /navbar. The category panel slides from the left, traps focus, locks this iframe's scroll while it's open, and restores focus to the trigger on close.

Try it

Click ☰ top-left — the panel slides in.
Click any category header — its items expand or collapse.
Tab cycles inside the panel — focus stays trapped.
Esc or click outside — closes; focus returns to ☰.
Notice the active page (Navbar) is highlighted and its category auto-expanded.

02. Welcome

Scroll past this block — the sticky header stays put. When the panel is open, scrolling here is locked so focus and scroll position stay coherent.

This is a self-contained mini-app: the sandbox page breaks out of the site layout so the demo's Navbar doesn't fight the real one at the top of /navbar.

03. Layout

Scroll past this block — the sticky header stays put. When the panel is open, scrolling here is locked so focus and scroll position stay coherent.

This is a self-contained mini-app: the sandbox page breaks out of the site layout so the demo's Navbar doesn't fight the real one at the top of /navbar.

04. Behaviour

Scroll past this block — the sticky header stays put. When the panel is open, scrolling here is locked so focus and scroll position stay coherent.

This is a self-contained mini-app: the sandbox page breaks out of the site layout so the demo's Navbar doesn't fight the real one at the top of /navbar.

05. Accessibility

Scroll past this block — the sticky header stays put. When the panel is open, scrolling here is locked so focus and scroll position stay coherent.

This is a self-contained mini-app: the sandbox page breaks out of the site layout so the demo's Navbar doesn't fight the real one at the top of /navbar.