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.
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.