Pro
Bounce nav
Navigation whose marker hops to the chosen item on an arc beside the list and lands with a small squash. The arc grows with the distance, so a neighbour is a skip and the far end is a jump.
pnpm dlx shadcn@latest add @caliper/bounce-navWhen to use
Use it for
- Section navigation in settings, docs or a sidebar with a handful of places.
- A tab bar on a page that wants a little life.
Skip it when
- Long lists; the hop over many rows reads as delay.
- Dense app chrome where the sidebar rail or tabs fit better.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Distance sets the hop
- The lift and the duration both grow with distance, capped, so the motion explains how far you moved without slowing short moves.
Usage
- Links or buttons
- Items with an href are links with aria-current; the rest are buttons. Arrow keys, Home and End move focus either way.
Installation
pnpm dlx shadcn@latest add @caliper/bounce-nav
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { BounceNav } from "@/components/ui/bounce-nav"
The worked example comes with Pro
The 50-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
Accessibility
It is built on native elements and keeps aria-label, aria-hidden and aria-current in step with state.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.