Navigation · component

FullscreenMenu

A full-viewport index that opens as a real dialog and cascades in.

open it, then try Escape and Tab

Paste into Claude Code, Cursor or any agent. Pinned to a tag, so it will not change under you.

Options

label Index

The trigger's text, and the dialog's accessible name. Keep it a noun. It is read out as the name of the whole overlay.

closeLabel Close

Text on the close control. There is a visible one as well as Escape, because Escape is not discoverable.

open false

true · false

Pass it to control the overlay yourself and listen to onOpenChange. Leave it undefined and the component keeps its own state, which is what you want unless a route change needs to close it.

What it needs

Dependencies: react@>=18
Browser: No WebGL
Frame budget: ~0.2 ms · 0 context
Pinned to: v0.6.2

Uses <dialog>.showModal(), so the focus trap, Escape, top layer and focus restoration are the browser's
The fade uses transition-behavior: allow-discrete and @starting-style; where those are unsupported the overlay appears instantly, which is a graceful loss
No focus-trap library, no portal, no scroll-lock package
The stagger is one transition-delay per row, composited
No JavaScript runs per frame