KB-205 · NAV/DOCK/PILL
Dock Pill Navbar
A floating pill dock moored top-center rather than spanning the page. The active page carries a seated dot; choosing another link sends the dot sliding along the pill on the snap spring via a shared layout id. On small screens the fold opens as a full sheet whose links land on the cascade.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/nav-dock-pill
Props
- brand / links / activeHref
- ReactNode · PillLink[] · string
- default —
- Identity, the link set, and the seated page.
- cta / onCta
- string · () => void
- default —
- The dock's one action; repeated inside the sheet.
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / links / activeHref | ReactNode · PillLink[] · string | — | Identity, the link set, and the seated page. |
| cta / onCta | string · () => void | — | The dock's one action; repeated inside the sheet. |