Steppers

Where a reader stands in a sequence — a tunnel, a form in several parts. The steps behind are drawn solid and can be gone back to when they are given an address; the one being done stands out; those ahead wait, discreet.

Numbered and named

The common case: a number to count by, a word to know what it asks. The two steps already walked link back.

Numbers alone

Where the steps have no names worth reading, or the width has no room for them.

Words alone

Without the numbers, when the order is obvious from the words.

First and last

Nothing walked yet, then everything walked but the step being done.

Steps not decided yet

Where paths part, what lies ahead depends on an answer not given yet. The step standing for it takes no number and moves none of the others: the last step here is the third, not the fourth.

Compact, and dots

For the header of a modal or a panel, where there is little room: compact keeps the numbers and names the step being done only; dots draw one dot per step and name none on screen, the names staying for whoever reads the page aloud. Right under the header of a modal or a panel, a stepper takes the place of the loading bar.

In a toolbar

Laid in a bar above a page, it takes the room the bar gives it.

In vue

The same stepper in a vue tree. Steps without an address can be made buttons: a sequence held by the page moves on the `select` it emits rather than on a new address.