Navigation v1.0.0

Stepper

Multi-step progress indicator for wizards, checkout flows, and onboarding. Supports click to navigate between completed steps, linear mode (only forward/back), and free mode (jump to any step). Visual styles include numbered circles, minimal dots, and vertical timeline layout.

Numbered

Horizontal numbered circles connected by lines. Completed steps show checkmarks.

Options

Name Type Default Description
steps * Array required Array of hashes with :title (String) and optional :description (String)
current_step Integer 0 Zero-based index of the current step
mode Symbol :linear Navigation mode: :linear (sequential) or :free (jump to any)

Dot

Minimal horizontal dots with labels below. Compact for short flows.

Options

Name Type Default Description
steps * Array required Array of hashes with :title
current_step Integer 0 Current step index
mode Symbol :linear :linear or :free

Vertical

Stacked vertically with connector lines, titles, and descriptions. Timeline-like.

Options

Name Type Default Description
steps * Array required Array of hashes with :title and :description
current_step Integer 0 Current step index
mode Symbol :linear :linear or :free

Changelog v1.0.0

- v1.0.0: Initial release with numbered, dot, and vertical styles

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now