Resizable Navbar

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

navbar responsive navigation layout

Open in

Startup

Features Pricing Contact

Startup

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 https://ui.aceternity.com/registry/resizable-navbar.json

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

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.

Go Pro

Manu is a genius. He is open-minded, curious and deeply invested in the projects he chooses to work on. He takes your vision and brings it to life -- and is a true partner in th...

Meru Gokhale

Founder at Editorially, Editrix