Floating Navbar
Floating pill navbar that hides on scroll down and returns on scroll up or focus.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
FloatingNavbarProps
Also accepts all props of Omit<React.ComponentProps<"header">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| links* required | FloatingNavLink[] | — | — |
| logo | React.ReactNode | — | — |
| action | React.ReactNode | — | — |
| scrollTarget | React.RefObject<HTMLElement | null> | — | Scroll container to watch; the window when omitted |
| defaultActive | string | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/floating-navbar.json