Navbar
Responsive navbar with frosted glass on scroll, a mobile menu and a floating pill variant.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
NavbarProps
Also accepts all props of React.ComponentProps<"header">
| Prop | Type | Default | Description |
|---|---|---|---|
| brand* required | React.ReactNode | — | — |
| links* required | NavbarLink[] | — | — |
| primaryAction | { label: string; href: string } | — | — |
| secondaryAction | { label: string; href: string } | — | — |
| variant | "bar" | "floating" | "bar" | "bar" spans the full width, "floating" is an inset pill |
| sticky | boolean | true | — |
| blur | boolean | true | Frosted glass background once the page is scrolled |
Install
$ npx shadcn@latest add https://chromotion.dev/r/navbar.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.