Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Rail nav

A vertical list with a dashed rail along its edge. A solid mark sits beside the current item and springs to a new one, and pointing at or tabbing to another row draws a faint mark there first.

Pro
pnpm dlx shadcn@latest add @caliper/rail-nav

Docs

Getting started

Installs components/ui/rail-nav.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Docs sidebars, settings sections and account menus.
  • Short lists where showing where you are and where you are going helps.

Skip it when

  • Long nested trees; use the tree or the sidebar.
  • Tracking scroll position; use the scroll-spy nav.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Measured, not guessed
The marks follow each row's real position and height, so wrapped labels and counts never misalign them.
Marks are decoration
The current row has aria-current and a heavier label; the rail only repeats it.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/rail-nav

Adds its 2 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.

example.tsx
import { RailNav } from "@/components/ui/rail-nav"

The worked example comes with Pro

The 36-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
Checking your licence…

API reference

RailNav

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
items *readonly RailNavItem[]—
value *string—
onValueChange((id: string) => void)—
label *string—
linkElementType"a"

Accessibility

It is built on native elements and keeps aria-label and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Dock & lists examples