A studio header with a Menu pill whose lines fold into a cross while the label rolls to Close, and a full-screen menu that grows out of the button in a circle. Oversized numbered links rise in sequence, with contact, socials and availability beside them.
npx shadcn@latest add https://hyperblur.dev/r/navbar-hamburger-morph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-hamburger-morph.tsx.
import { NavbarHamburgerMorph } from "@/components/hyperblur/navbar-hamburger-morph"
<NavbarHamburgerMorph brand="Wren" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Wren" | Studio wordmark. |
| tagline | string | "Independent design studio, Lisbon" | Small text in the middle of the bar on wide screens. |
| links | { label: string; href: string; note?: string }[] | Work, Studio, Services, Journal, Contact | Large menu links. A note is shown on the right of the line on wide screens. |
| socials | { label: string; href: string }[] | Instagram, LinkedIn, Dribbble, Are.na | Pill links in the side column. |
| string | "hello@wren.studio" | New business address, rendered as a mailto link. | |
| address | string | "Rua da Boavista 84\n1200-066 Lisbon, Portugal" | Studio address. Line breaks are kept. |
| availability | string | null | "Taking new projects for Q1 2027" | Status chip with a live dot. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Let's talk", href: "#" } | Outlined link next to the menu button. Pass null to hide it. |
| open | boolean | Controlled menu state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Start open when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the menu opens or closes. | |
| embedded | boolean | false | Keep the menu inside the component instead of covering the viewport, and skip the scroll lock. Useful for previews. |
| accent | string | "#ff5b2e" | Color of the button disc, the wordmark dot, link arrows and focus rings. |
| paper | string | "#ece8df" | Background of the open menu. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |