Resizable Navbar
A navbar that changes width on scroll, responsive and animated.
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/resizable-navbar.json
Props
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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Excellent communication and professionalism from the start and
throughout. Happily and calmly accepted and entertained a few additional
out-of-scope requests as well. Good open-...
Henrik Söderlund
Former CTO at Creme Digital