Staggered menu

Make it fit your project.

Open an accessible navigation disclosure. Reveal items using opacity and a 10px vertical translation, with 35ms between items and a total sequence under 350ms. Reverse the group as one unit on close; restore focus to the trigger.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Open an accessible navigation disclosure. Reveal items using opacity and a 10px vertical translation, with 35ms between items and a total sequence under 350ms. Reverse the group as one unit on close; restore focus to the trigger.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Hidden links must not remain in the tab order. Do not stagger keyboard focus.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.