Skip to content
Pinky UI

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

Arrival

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