KQ-519 · BURGER/SHEET
Burger Sheet
A menu button that turns into its own close button: the middle bar fades while the outer two travel to the centre and rotate on snap, the same spring the sheet's links land on. The sheet is a large surface, so it arrives on glide with its links cascading behind it and leaves on the exit ease. It is a real dialog while open — focus is trapped in the panel, Escape closes and returns focus to the button, and the frame passed as container stops scrolling.
KQ-519 · BURGER/SHEET
- WL-4192Basinworks depot 3In transit
- WL-4188Coldbrook yardHeld
- WL-4171Fernworks benchDelivered
- WL-4166Gaugeworks line 2Delivered
- WL-4150Fieldline north dockDelivered
- WL-4149Basinworks depot 1Delivered
Menu closed
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/burger-sheet
Props
- items
- { label: string; href: string }[]
- default —
- Links in the sheet, top to bottom.
- side
- "left" | "right"
- default left
- Which edge the sheet enters from.
- open / defaultOpen
- boolean
- default false
- Controlled or initial open state.
- onOpenChange
- (open: boolean) => void
- default —
- Fires on open and on close.
- container
- React.RefObject<HTMLElement | null>
- default —
- The scrolling frame the sheet covers; its scroll locks while open.
- title
- string
- default Menu
- Heading inside the sheet; also names the dialog.
- label
- string
- default Menu
- Names the menu button, which carries aria-expanded.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; href: string }[] | — | Links in the sheet, top to bottom. |
| side | "left" | "right" | left | Which edge the sheet enters from. |
| open / defaultOpen | boolean | false | Controlled or initial open state. |
| onOpenChange | (open: boolean) => void | — | Fires on open and on close. |
| container | React.RefObject<HTMLElement | null> | — | The scrolling frame the sheet covers; its scroll locks while open. |
| title | string | Menu | Heading inside the sheet; also names the dialog. |
| label | string | Menu | Names the menu button, which carries aria-expanded. |