A slide-in navigation drawer with a scrim. It fills its nearest positioned parent, traps Tab focus, closes on Escape or a scrim click and returns focus to the trigger.
Mobile drawer
Esc, the scrim or the close button dismiss it.
npx shadcn@latest add https://hyperblur.dev/r/sidebar-drawer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-drawer.tsx.
import { SidebarDrawer } from "@/components/hyperblur/sidebar-drawer"
<div style={{ position: "relative", height: 480 }}><SidebarDrawer open={open} onOpenChange={setOpen} header="Menu" /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. An initially open drawer does not take focus until it is reopened. |
| onOpenChange | (open: boolean) => void | Called when the drawer asks to open or close. | |
| side | "left" | "right" | "left" | Edge the drawer slides from. |
| items | { id: string; label: string; icon?: ReactNode; badge?: string | number; href?: string }[] | sample items | Navigation entries. Links render for items with `href`, buttons otherwise. |
| header | ReactNode | Content at the top of the panel, next to the close button. | |
| footer | ReactNode | Content pinned to the bottom of the panel. | |
| active | string | Controlled active item id. Pair with onChange. | |
| defaultActive | string | first item | Initial active item id when uncontrolled. |
| onChange | (id: string) => void | Called when an item is chosen. | |
| closeOnSelect | boolean | true | Close the drawer after an item is chosen. |
| rowHeight | number | 44 | Height of each navigation row in pixels. |
| position | "absolute" | "fixed" | "absolute" | Absolute fills the nearest positioned ancestor, which suits a phone frame or a card. Fixed covers the whole viewport. |
| width | number | string | "min(280px, 84%)" | Panel width. Numbers are pixels. |
| label | string | "Navigation menu" | Accessible name of the dialog and its navigation. |
| color | string | "#2f7bff" | Accent color for badges, the active icon and focus rings. |