Steps

Horizontal

Numbered steps for a linear process, with the current step highlighted.

• 1
• 2
• 3

Horizontal counter

The same steps without numbers, for a more minimal look.

1. Step 1 (completed)
2. Step 2 (current)
3. Step 3

With labels

Give each step a title instead of a number.

• Cart
• Billing Information
• Confirmation

Breadcrumb arrows

Chevron-style steps, useful for wizards and checkouts.

1. Step one
2. Step two
3. Step three
4. Step four

Breadcrumb numbered

Number each step and mute the ones not yet reached.

1. 1. Step one
2. 2. Step two
3. 3. Step three
4. 4. Step four
5. 5. Step five

Breadcrumb muted

A quieter style for steps that shouldn't compete with the rest of the page.

1. 1. Step one
2. 2. Step two
3. 3. Step three
4. 4. Step four
5. 5. Step five