A full-frame menu that slides in as three layered panels, then reveals its links one by one. The hamburger morphs into a close icon, Escape closes it and focus stays inside.
Copenhagen / Est. 2014
Rooms that
breathe.
npx shadcn@latest add https://hyperblur.dev/r/menu-staggered.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-staggered.tsx.
import { MenuStaggered } from "@/components/hyperblur/menu-staggered"
<div style={{ height: 320 }}><MenuStaggered brand="Atelier" /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| links | { label: string; href?: string; onClick?: () => void }[] | Work, Studio, Journal, Contact | Main links shown large, numbered in order. |
| footer | { label: string; href?: string; onClick?: () => void }[] | Instagram, Dribbble, LinkedIn | Small secondary links in the corner of the menu. |
| brand | ReactNode | "Atelier" | Content on the left of the top bar. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the menu opens or closes. | |
| side | "right" | "left" | "right" | Edge the panels slide in from. |
| accent | string | "#2f7bff" | Color of the leading panel, numbers and focus ring. |
| menuLabel | string | "Main menu" | Accessible name of the navigation. |
| children | ReactNode | Page content shown behind the menu. A sample hero is used when omitted. |