An off-canvas menu that pushes the page aside as a scaled, rounded card with a ghost card behind it, revealing large numbered links. The burger morphs into a cross, focus stays trapped and Escape closes.
Design for the long run.
npx shadcn@latest add https://hyperblur.dev/r/menu-side-push.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-side-push.tsx.
import { MenuSidePush } from "@/components/hyperblur/menu-side-push"
<MenuSidePush embedded><main style={{ padding: 64 }}>Your page</main></MenuSidePush>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The page content that slides away when the menu opens. | |
| items | { id: string; label: string; href?: string; meta?: string }[] | Work, Studio, Journal, Careers, Contact | Main links. An href renders an anchor. meta shows a small pill next to the label. |
| secondary | { label: string; href?: string }[] | Instagram, Dribbble, LinkedIn | Small links at the bottom of the menu. |
| active | string | Controlled current link id. Pair with onChange. | |
| defaultActive | string | first item | Initially current link when uncontrolled. |
| onChange | (id: string) => void | Called when a link is chosen. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the menu asks to open or close. | |
| closeOnSelect | boolean | true | Close the menu after a link is chosen. |
| brand | string | "Northfold Studio" | Name shown next to the burger inside the menu. |
| note | string | "Booking projects for March" | Status line with a green dot at the bottom. Empty hides it. |
| menuWidth | number | 220 | How far the page slides, in pixels. |
| embedded | boolean | false | Fill the parent instead of the viewport height and skip the page scroll lock. |
| accent | string | "#2f7bff" | Accent for the brand dot, link underline and focus ring. |