Loading…

Rail Nav

beta

A vertical navigation list whose active marker springs between rows: a bouncing dot that squashes and stretches, or a dashed rail that hooks into the active row.

Navigation
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add rail-nav

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { RailNav } from "@/components/ui/rail-nav";

Examples

Every example the tests run, live and operable, side by side.

Default
Hook
Solid Rail
Gallery
Custom Colour
Controlled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<RailNav>

Prop	Type	Default
`items` (required) The rows, in order. A string or `{ label }` is a button, `href` makes it a link, and `{ label, heading: true }` is a group label the marker skips.	`RailNavItem[]`	—
`color` Any CSS colour for the active marker. Defaults to the primary token.	`string`	—
`dashed` Draw the hook rail as dashes. Only applies to `indicator="hook"`.	`boolean`	`true`
`defaultValue` Index of the row active at first, when uncontrolled. Defaults to the first selectable row.	`number`	—
`indicator`	`"bounce" \| "hook"`	`"bounce"`
`label` A title shown above the list. It also names the navigation.	`ReactNode`	—
`onValueChange` Called with the index of a newly selected row.	`(index: number) => void`	—
`value` Index (into `items`) of the active row, when controlled.	`number`	—

Plus every attribute of <nav> except defaultValue, color.

Accessibility

A <nav> named by its visible label (aria-labelledby) or by aria-label, containing a real list. Each row is a link (aria-current="page" when active) or a button (aria-current="true"), all in the Tab order; ArrowUp/ArrowDown (wrapping), Home and End also move focus between rows. Headings are plain list items, never focusable, and the marker skips them. Disabled rows are disabled buttons, or links with aria-disabled that ignore activation. The marker, the rails and the hover rail are one aria-hidden layer that ignores the pointer; the active row is also set apart by text colour and aria-current, so the marker is never the only signal. Springs run through motion inside MotionConfig reducedMotion="user", and under reduced motion the marker jumps without squash or overshoot.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

items

The rows, in order. A string or { label } is a button, href makes it a link, and { label, heading: true } is a group label the marker skips.

RailNavItem[]

—

color

Any CSS colour for the active marker. Defaults to the primary token.

string

—

dashed

Draw the hook rail as dashes. Only applies to indicator="hook".

boolean

true

defaultValue

Index of the row active at first, when uncontrolled. Defaults to the first selectable row.

number

—

indicator

"bounce" | "hook"

"bounce"

label

A title shown above the list. It also names the navigation.

ReactNode

—

onValueChange

Called with the index of a newly selected row.

(index: number) => void

—

value

Index (into items) of the active row, when controlled.

number

—