Floating Nav

ProNew

A pill-shaped navigation bar that floats over the page, with an active indicator that slides between items and optional hide on scroll.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/floating-nav

Prop	Type	Default	Description
`items`	`FloatingNavItem[]`	-	Links in the bar: `{ value, label, href?, icon? }`.
`value`	`string`	-	Active item when controlled.
`defaultValue`	`string`	first item	Active item on first render when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called when an item is clicked.
`position`	`"top" \| "bottom"`	`"top"`	Edge of the screen the bar floats from.
`autoHide`	`boolean`	`false`	Slide away on scroll toward the content and return on the opposite scroll. Stays visible while it holds focus.
`label`	`string`	`"Primary"`	Accessible name of the `<nav>` landmark.
`scrollContainer`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch for `autoHide` instead of the page.

Also accepts all <nav> props.

The bar is fixed and centered. Add absolute to className to place it inside a positioned container.
The active link gets aria-current="page". When an item has an icon, its label is visually hidden below the sm breakpoint but stays the accessible name.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/floating-nav

Prop	Type	Default	Description
`items`	`FloatingNavItem[]`	-	Links in the bar: `{ value, label, href?, icon? }`.
`value`	`string`	-	Active item when controlled.
`defaultValue`	`string`	first item	Active item on first render when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called when an item is clicked.
`position`	`"top" \| "bottom"`	`"top"`	Edge of the screen the bar floats from.
`autoHide`	`boolean`	`false`	Slide away on scroll toward the content and return on the opposite scroll. Stays visible while it holds focus.
`label`	`string`	`"Primary"`	Accessible name of the `<nav>` landmark.
`scrollContainer`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch for `autoHide` instead of the page.

Also accepts all <nav> props.

The bar is fixed and centered. Add absolute to className to place it inside a positioned container.
The active link gets aria-current="page". When an item has an icon, its label is visually hidden below the sm breakpoint but stays the accessible name.