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.
- 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
Wrap all the items from your wizard in
.wizard and each item in
button tags with the
If the wizard items are different for
Wizards with free navigation
<!-- 'a' tag version --><!-- 'button' tag version -->
Wizard with restricted navigation
.visited class for the wizard items that are before the selected/active ones.