A header whose menus open a two-pane panel: a list of destinations on the left and a live illustrated preview on the right that redraws for whichever item is hovered or focused. Switching menus slides the list in the direction of travel.
npx shadcn@latest add https://hyperblur.dev/r/navbar-mega-preview.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-mega-preview.tsx.
import { NavbarMegaPreview } from "@/components/hyperblur/navbar-mega-preview"
<NavbarMegaPreview brand="Lattice" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Lattice" | Product name next to the grid mark. |
| menus | NavbarMegaPreviewMenu[] | Platform, Developers, Solutions, Pricing, Changelog | Top entries. An entry with items opens the panel; one with only href is a plain link. Items take title, description, href, art (graph, terminal, globe, shield, bars, stack) and an optional tag. |
| openId | string | null | Controlled id of the open menu. Pair with onOpenChange. | |
| defaultOpenId | string | null | null | Menu open on first render when uncontrolled. |
| onOpenChange | (id: string | null) => void | Called when a menu opens, switches or closes. | |
| defaultItem | number | 0 | Item previewed when a menu first opens. |
| signIn | { label: string; href: string } | null | { label: "Log in", href: "#" } | Quiet link on the right. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Deploy free", href: "#" } | Primary button on the right. Pass null to hide it. |
| accent | string | "#22d3a5" | Color of the preview art, hovered icons, tags and focus rings. |
| showBackdrop | boolean | true | Render a sample page under the bar for previews. Turn it off in a real layout. |