Floating Pill Navbar
A transparent header that gains a rounded background as you scroll. On phones, links open in a side menu.
- Dependencies
- No extra packages
- Size
- 267 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/floating-pill-navbar.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/floating-pill-navbar.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the floating-pill-navbar.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / brandLight / brandHref | string | "Aurora" / "Vault" / "#hero" | Wordmark: a ✳ symbol, a 600-weight word and an optional 400-weight word. |
| links | FloatingPillNavLink[] | — | { label, href } for desktop links and the numbered menu rows. |
| activeHref | string | "" | Link that gets aria-current="page" and keeps its dot visible. |
| ctaLabel / ctaHref / menuContactLabel | string | "Let’s talk" / "#contact" / "Contact" | Underlined contact link (hidden below 768px) and the extra last menu row that points to the same href. |
| menuTitle / caption | string | — | Menu eyebrow and footer caption; newlines become breaks. |
| threshold | number | 36 | scrollY in px after which the glass surface appears. |
| accent | string | "#c9b9ee" | Brand symbol, link dots, menu numbers and focus outline. |
| position | "fixed" | "absolute" | "fixed" | Follow the viewport or stay at the top of the positioned parent. |