Resizable Navbar
A navbar that changes width on scroll, responsive and animated.
Installation
Run the following command
npx shadcn@latest add @aceternity/resizable-navbarProps
Resizable Navbar Props
Navbar
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Child elements to render inside the navbar |
| className | string | - | Additional CSS classes to apply to the navbar |
NavBody
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Child elements to render inside the nav body |
| className | string | - | Additional CSS classes to apply to the nav body |
| visible | boolean | false | Controls the visibility state of the nav body |
NavItems
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Array<{ name: string, link: string }> | - | Array of navigation items with name and link |
| className | string | - | Additional CSS classes to apply to the nav items |
| onItemClick | () => void | - | Callback function when a nav item is clicked |
MobileNav
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Child elements to render inside the mobile nav |
| className | string | - | Additional CSS classes to apply to the mobile nav |
| visible | boolean | false | Controls the visibility state of the mobile nav |
MobileNavHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Child elements to render inside the mobile nav header |
| className | string | - | Additional CSS classes to apply to the mobile nav header |
MobileNavMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Child elements to render inside the mobile nav menu |
| className | string | - | Additional CSS classes to apply to the mobile nav menu |
| isOpen | boolean | - | Controls whether the mobile menu is open |
| onClose | () => void | - | Callback function when the mobile menu is closed |
MobileNavToggle
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | - | Controls whether the mobile menu is open |
| onClick | () => void | - | Callback function when the toggle is clicked |
NavbarButton
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | - | URL for the button link |
| as | React.ElementType | "a" | HTML element type to render (a or button) |
| children | React.ReactNode | - | Child elements to render inside the button |
| className | string | - | Additional CSS classes to apply to the button |
| variant | "primary" | "secondary" | "dark" | "gradient" | "primary" | Visual style variant of the button |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
