Browse components
Motion Navbar
Site navbar with a hover pill that glides between links and a single dropdown that morphs its size and position between menus.
Installation
npx shadcn@latest add @glint-ui/motion-navbarFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/motion-navbar.json
Usage
import { MotionNavbar } from "@/components/ui/motion-navbar";
<MotionNavbar
logo={<Logo />}
items={[
{ label: "Products", content: <ProductsMenu /> },
{ label: "Resources", content: <ResourcesMenu /> },
{ label: "Pricing", href: "/pricing" },
]}
actions={<Button>Get started</Button>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, href?, content? }; items with content open the dropdown. |
| logo | ReactNode | — | Left slot, usually the brand. |
| actions | ReactNode | — | Right slot, usually buttons. |
| bounce | number | 0.15 | Spring bounce of the glide and morph. |
| duration | number | 0.4 | Seconds for the glide and morph. |
| closeDelay | number | 150 | Ms before the dropdown closes after leaving. |
| className | string | — | Extra classes for the root element. |