A frosted glass navbar with a sliding hover pill, a keyboard-navigable mega menu and a hamburger layout that takes over in narrow containers.
npx shadcn@latest add https://hyperblur.dev/r/navbar-glass.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-glass.tsx.
import { NavbarGlass } from "@/components/hyperblur/navbar-glass"
<NavbarGlass cta={{ label: "Start free", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | Content of the logo slot. Defaults to a small mark with the Hyperblur name. | |
| links | { id: string; label: string; href?: string; menu?: { title: string; description?: string; href?: string; icon?: IconName | ReactNode }[] }[] | Navigation links. A link with a `menu` array opens the mega menu panel. Built-in icon names: bolt, chart, shield, code, users, book, globe, layers. | |
| cta | { label: string; href?: string; onClick?: () => void } | null | { label: "Get started", href: "#" } | Primary call to action on the right. Pass null to hide it. |
| accent | string | "#2f7bff" | Color of the call to action, the menu icons and the focus rings. |
| sticky | boolean | true | Sticks the navbar to the top of its scroll container. Set false for a static position. |
| defaultOpenId | string | Id of a link whose mega menu starts open. Escape, an outside click or focus leaving the navbar closes it. |