Focus Rail
A continuous secondary rail that promotes one collection item into a readable primary surface — a primary/secondary reading pattern, not a tab bar.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Primary surface
Arrival
01 / threshold
Purpose
A continuous secondary rail that promotes one collection item into a readable primary surface — a primary/secondary reading pattern, not a tab bar.
Good for
- Chapter indexes, project collections and focused archives
- A small set where one item deserves more reading room than the rest
Avoid for
- Utility navigation or large database filters
- Independent items that do not share a primary reading context
How many items
Three to eight; a continuous rail should stay scannable.
Mobile
The rail becomes a horizontally scrollable, touch-sized selector above the primary surface.
Motion intensity
Low. Only the selected surface animates; the rail itself uses ordinary flow and never creates a scroll trap.
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.
Composes with
Split Narrative for a two-plane story instead of a rail-plus-surface; Gallery ↔ List Morph when the primary surface itself should change shape.
Source: packages/skills/layouts/focus-rail.md