Navbar
A fixed-position responsive navbar that animates from a wide bar to a compact pill shape as the user scrolls. Built with Framer Motion.
Default Navbar
Scroll inside the preview to see the collapse animation. The navbar shrinks into a compact pill after 200 px of scroll.
↓ Scroll down to see the navbar collapse ↓
Content block 1
Content block 2
Content block 3
Content block 4
Content block 5
Content block 6
Content block 7
Content block 8
White Navbar
A clean white variant with custom logo, CTA label, widths, and a faster collapse threshold.
↓ Scroll down to see the navbar collapse ↓
Content block 1
Content block 2
Content block 3
Content block 4
Content block 5
Content block 6
Content block 7
Content block 8
Installation
$ npx shadcn add https://knot-ui.trupal.me/r/navbar.json
NavbarProps
Props accepted by the <Navbar /> component.
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | NavItem | { label: "Knot-ui", href: "/" } | Brand / logo item rendered on the left. Accepts label, href, and an optional icon ReactNode. |
| loginLabel | string | "Login" | Text label for the CTA / login link on the right. |
| loginHref | string | "/login" | Destination URL for the CTA / login link. |
| expandedWidth | string | "min(56rem, calc(100vw - 2rem))" | CSS width value when the navbar is fully expanded (at the top of the page). |
| collapsedWidth | string | "min(18rem, calc(100vw - 2rem))" | CSS width value after the user scrolls past shrinkAfter. The navbar also animates to a pill shape. |
| shrinkAfter | number | 200 | Scroll distance in pixels before the navbar collapses from expanded to pill form. |
| className | string | "" | Additional CSS classes applied to the outer wrapper. |
NavItem
Shape of the logo prop.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Display text for the navigation item. |
| href | string | — | URL the item links to. |
| icon | React.ReactNode | undefined | Optional React node rendered before the label (icon, SVG, Image, etc.). |