Wizard

Wizards lead a user through a process step by step. They contain a series of single-step screens, and are often used for setup and configuration tasks. Read more about wizards in the UX Guidelines.
Also you can check out the stepper, it's an alternative to wizard.

Use when

  • The user needs guidance through a multi-step process, for instance if it's a low frequency task or the steps to take are unclear
  • Steps have to be done in a specific order
  • The task has a clear start and end

Design

Wrap all the items from your wizard in .wizard and each item in a or button tags with the .wizard-item.

If the wizard items are different for a or button tags, you need to add some javascript for different state (eg: focus, pressed, etc) to behave and work as recommended.

Wizards with free navigation

Wizard with restricted navigation

Add .visited class for the wizard items that are before the selected/active ones.