Wizard

A wizard allows user to complete a large form by breaking it into logical guided process.

It indicates the user the current progress and provide links to navigate back and forth in the process.


Example:


Code:

        
          <ul class="wizard">
            <li class="wizard-description">Create New Widget</li>
            <li class="completed"><a href="#"><span>1</span>Step 1</a></li>
            <li class="current"><a href="#"><span>2</span>Step 2</a></li>
            <li><a href="#"><span>3</span>Step 3</a></li>
            <li><a href="#"><span>4</span>Step 4</a></li>
          </ul>

Wizard with many steps