Floating Navbar
Hides on scroll down, returns the moment you scroll up.
- 1.2 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Scroll down in this box to hide the bar, then scroll up to bring it back.
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/floating-navbar.jsonAdds components/velora/floating-navbar.tsx.
Props
| Prop | Type | Default |
|---|---|---|
revealAfterPixels scrolled before the bar is allowed to hide | number | 120 |
scrollContainerScrollable element to watch instead of the window | React.RefObject<HTMLElement | null> | — |
children* | React.ReactNode | — |
Also accepts every React.HTMLAttributes<HTMLElement> prop, forwarded to the root element.
Accessibility
- Reduced motion
- The bar still hides on scroll down and returns on scroll up, but it jumps instead of sliding over 300ms.
- Keyboard
- Links inside stay in the tab order. Moving focus into the bar brings it back on screen, and it does not hide while focus is inside it.
- Screen readers
- Renders a <header> (a banner landmark at the top level of the page) and adds no ARIA of its own.