Focus Rail
A continuous secondary rail that promotes one collection item into a readable primary surface.
- collections
- rail
- focus
- selection
- primary-secondary
Primary surface
Arrival
01 / threshold
Usage
usage
import { FocusRail } from "@pinky-ui/layouts";
<FocusRail items={chapters} defaultActiveId={chapters[0].id} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FocusRailItem[] | — | Labeled primary surfaces with optional metadata. |
| activeId | string | — | Controlled active item id. |
| onActiveIdChange | (id: string) => void | — | Called when hover, focus or selection changes the primary surface. |
Accessibility
- Rail entries are native buttons with pressed and current state.
- Arrow, Home and End keys move through the rail.
- The primary surface has a polite live region and does not require hover.
Performance
- Only the selected surface is animated.
- The rail uses ordinary flow and does not create a scroll trap.
Reduced motion
Selection updates the primary surface immediately while the continuous rail and labels remain intact.
When to use
- Chapter indexes, project collections and focused archives.
- A small set where one item deserves more reading room.
When not to use
- Utility navigation or large database filters.
- Independent items that do not share a primary reading context.