Resizable Navbar

Full-width navbar that shrinks into a floating, blurred pill once you scroll.

Scroll inside this box — the bar shrinks into a floating pill.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/resizable-navbar.json

Adds components/velora/resizable-navbar.tsx, installs motion.

A full landing page in a scroll box: hero, logos, features and a closing CTA.

New — timelines are here

One calm place for roadmaps, requests and releases — built for teams of five to five hundred.

Edits reach every device in under 100ms.

Boards, lists and timelines over the same data.

End-to-end encryption on every plan.

Sort incoming requests before you open them.

No card required. Upgrade when you outgrow it.

Prop	Type	Default
`items*` Links shown in the bar (and in the mobile menu)	`NavItem[]`	`—`
`logo` Brand mark or logo link on the left	`React.ReactNode`	`—`
`cta` Call to action on the right (e.g. a sign-up link)	`React.ReactNode`	`—`
`threshold` Pixels scrolled before the bar shrinks into a floating pill	`number`	`80`
`compactWidth` Maximum width of the floating pill, in px	`number`	`760`
`maxWidth` Maximum width of the full bar, in px	`number`	`1152`
`activeHref` href of the current page; that link gets aria-current="page"	`string`	`—`
`label` Accessible name of the navigation landmark	`string`	`"Main"`
`container` Scrollable element to watch instead of the window	`React.RefObject<HTMLElement \| null>`	`—`

Also accepts every React.HTMLAttributes<HTMLElement> prop, forwarded to the root element.

interface NavItem {
  label: string;
  href: string;
}

Reduced motion: The bar still narrows into the pill past the threshold, but it snaps to size instead of springing; the link highlight jumps rather than glides and the mobile menu appears without sliding.
Keyboard: Links are native anchors and the highlight follows keyboard focus. In the narrow layout a Menu button toggles the link list; Escape closes it and returns focus to the button, and choosing a link or clicking outside closes it too.
Screen readers: A header containing a nav landmark (label prop) with aria-current on the active link; the menu button reports aria-expanded and aria-controls, and the highlight is aria-hidden.