Resizable Navbar

A navbar that changes width on scroll, responsive and animated.

Check the navbar at the top of the container

For demo purpose we have kept the position as Sticky. Keep in mind that this component is fixed and will not move when scrolling.

The

First

Rule

Of

F

Club

Is

You

Do NOT TALK about

F Club

Installation

Run the following command

npx shadcn@latest add @aceternity/resizable-navbar

Props

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

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access