Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Resizable Navbar

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

Open in

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

Resizable Navbar Props

PropTypeDefaultDescription
childrenReact.ReactNode-Child elements to render inside the navbar
classNamestring-Additional CSS classes to apply to the navbar
PropTypeDefaultDescription
childrenReact.ReactNode-Child elements to render inside the nav body
classNamestring-Additional CSS classes to apply to the nav body
visiblebooleanfalseControls the visibility state of the nav body
PropTypeDefaultDescription
itemsArray<{ name: string, link: string }>-Array of navigation items with name and link
classNamestring-Additional CSS classes to apply to the nav items
onItemClick() => void-Callback function when a nav item is clicked

MobileNav

PropTypeDefaultDescription
childrenReact.ReactNode-Child elements to render inside the mobile nav
classNamestring-Additional CSS classes to apply to the mobile nav
visiblebooleanfalseControls the visibility state of the mobile nav

MobileNavHeader

PropTypeDefaultDescription
childrenReact.ReactNode-Child elements to render inside the mobile nav header
classNamestring-Additional CSS classes to apply to the mobile nav header

MobileNavMenu

PropTypeDefaultDescription
childrenReact.ReactNode-Child elements to render inside the mobile nav menu
classNamestring-Additional CSS classes to apply to the mobile nav menu
isOpenboolean-Controls whether the mobile menu is open
onClose() => void-Callback function when the mobile menu is closed

MobileNavToggle

PropTypeDefaultDescription
isOpenboolean-Controls whether the mobile menu is open
onClick() => void-Callback function when the toggle is clicked
PropTypeDefaultDescription
hrefstring-URL for the button link
asReact.ElementType"a"HTML element type to render (a or button)
childrenReact.ReactNode-Child elements to render inside the button
classNamestring-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
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

A product by Aceternity
Building in public at @mannupaaji