Stepper & Wizard

Overview

The Stepper component conveys progress through numbered or labeled steps in a multi-step form, wizard, or checkout experience.

Horizontal Stepper

✓

Account

Setup credentials
2

Profile

Personal info
3

Review

Final confirmation

<ul class="stepper">
  <li class="step-item completed">
    <div class="step-circle"><span>✓</span></div>
    <div class="step-content">
      <div class="step-title"><span>Account</span></div>
      <div class="step-subtitle"><span>Setup credentials</span></div>
    </div>
  </li>
  <li class="step-item active">
    <div class="step-circle"><span>2</span></div>
    <div class="step-content">
      <div class="step-title"><span>Profile</span></div>
      <div class="step-subtitle"><span>Personal info</span></div>
    </div>
  </li>
  <li class="step-item">
    <div class="step-circle"><span>3</span></div>
    <div class="step-content">
      <div class="step-title"><span>Review</span></div>
      <div class="step-subtitle"><span>Final confirmation</span></div>
    </div>
  </li>
</ul>

Vertical Stepper

✓

Order Placed

Oct 12, 10:30 AM
2

Processing

Item packed and ready
3

Delivered

Pending carrier pickup

<ul class="stepper stepper-vertical">
  <li class="step-item completed">
    <div class="step-circle"><span>✓</span></div>
    <div class="step-content">
      <div class="step-title"><span>Order Placed</span></div>
      <div class="step-subtitle"><span>Oct 12, 10:30 AM</span></div>
    </div>
  </li>
  <li class="step-item active">
    <div class="step-circle"><span>2</span></div>
    <div class="step-content">
      <div class="step-title"><span>Processing</span></div>
      <div class="step-subtitle"><span>Item packed and ready</span></div>
    </div>
  </li>
  <li class="step-item">
    <div class="step-circle"><span>3</span></div>
    <div class="step-content">
      <div class="step-title"><span>Delivered</span></div>
      <div class="step-subtitle"><span>Pending carrier pickup</span></div>
    </div>
  </li>
</ul>

Interactive Wizard with JavaScript & Buttons

Wire previous and next buttons directly with data-boodoo-stepper="prev" and data-boodoo-stepper="next":

1

Account

Login details
2

Billing

Payment method
3

Confirm

Ready to launch

Step 1: Enter your account email

Set up your organization credentials.

<!-- Stepper with data-boodoo-target pointing to tab panels -->
<ul class="stepper" id="wizardStepper" data-boodoo-target="#wizardPanels">...</ul>

<button type="button" class="btn btn-outline-secondary" data-boodoo-stepper="prev" data-boodoo-target="#wizardStepper">
  <span>Previous</span>
</button>
<button type="button" class="btn btn-primary" data-boodoo-stepper="next" data-boodoo-target="#wizardStepper">
  <span>Next Step</span>
</button>

Progress Stepper with Percentage Markers

Conveys completion metrics at every stage with .stepper-progress and .step-percent:

✓

0%
2

25%
3

50%
4

75%
5

100%

<ul class="stepper stepper-progress">
  <li class="step-item completed">
    <div class="step-circle"><span>✓</span></div>
    <div class="step-percent"><span>0%</span></div>
  </li>
  <li class="step-item active">
    <div class="step-circle"><span>2</span></div>
    <div class="step-percent"><span>25%</span></div>
  </li>
  <li class="step-item">
    <div class="step-circle"><span>3</span></div>
    <div class="step-percent"><span>50%</span></div>
  </li>
</ul>

Chevron Arrow Process Pipeline

Interlocking arrow sequence for lead stages, CRM lifecycles, and deal tracking using .process-flow:

✓

Unqualified

Closed

<div class="process-flow">
  <div class="process-step completed">
    <span class="process-icon"><span>✓</span></span>
  </div>
  <div class="process-step">
    <span>Unqualified</span>
  </div>
  <div class="process-step">
    <span>Closed</span>
  </div>
</div>

Illustrated Icon Timeline

Multi-tier milestone flow with top artwork/icons, center timeline bullets, and descriptive labels using .stepper-icons:

👻 Ghost
🐱 Cat
🕷️ Spider
💀 Skull

<ul class="stepper-icons">
  <li class="step-item completed">
    <span class="step-illustration"><span>👻</span></span>
    <span class="step-bullet"></span>
    <span class="step-name"><span>Ghost</span></span>
  </li>
  <li class="step-item active">
    <span class="step-illustration"><span>🕷️</span></span>
    <span class="step-bullet"></span>
    <span class="step-name"><span>Spider</span></span>
  </li>
</ul>

Minimal Stepper Nodes & Progress Step Cards

Clean bullet milestones and modular wizard cards for streamlined checkout panels:

01

100% Completed

02

✓ Cart
Pay
Done

<ul class="stepper-minimal">
  <li class="step-node completed">
    <span class="node-dot"><span>✓</span></span>
    <span class="node-label"><span>Cart</span></span>
  </li>
  <li class="step-node active">
    <span class="node-dot"></span>
    <span class="node-label"><span>Pay</span></span>
  </li>
</ul>