Stepped process

Stepped process bar used for multiple steps forms process

On this page

How to use

Use a nav element with .stepped-process class, containing an ordered list <ol> with .stepped-process-item class on list items.

Use short labels for each step, otherwise they will be cut off to preserve inline layout. More information can be carried on the title attribute of the .stepped-process-link.

Add .active to a .stepped-process-item to indicate the current step, alongside aria-current="step" to convey the active state to assistive technologies.

Example

html

<nav class="stepped-process" aria-label="Checkout process">
  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
  <ol>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
    </li>
    <li class="stepped-process-item active">
      <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
    </li>
  </ol>
</nav>

Dark variant

Add .stepped-process-dark to the .stepped-process for a dark variant.

html

<nav class="stepped-process stepped-process-dark" aria-label="Checkout process">
  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
  <ol>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
    </li>
    <li class="stepped-process-item active">
      <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
    </li>
  </ol>
</nav>

CSS

Variables

As part of Boosted Innovation Cup’s evolving CSS variables approach, stepped processes now use local CSS variables on .stepped-process for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}stepped-process-font-size: #{$stepped-process-font-size};
  --#{$prefix}stepped-process-font-weight: #{$stepped-process-font-weight};
  --#{$prefix}stepped-process-counter: #{$stepped-process-counter};
  --#{$prefix}stepped-process-item-padding-y: #{$step-item-padding};
  --#{$prefix}stepped-process-item-padding-x: 0;
  --#{$prefix}stepped-process-item-margin-end: #{$step-item-margin-end};
  --#{$prefix}stepped-process-item-bg: #{$step-item-bg};
  --#{$prefix}stepped-process-item-active-bg: #{$step-item-active-bg};
  --#{$prefix}stepped-process-item-next-bg: #{$step-item-next-bg};
  --#{$prefix}stepped-process-item-drop-shadow: none;
  --#{$prefix}stepped-process-item-arrow-width: 0;
  --#{$prefix}stepped-process-item-arrow-shape: #{$step-item-arrow-shape};
  --#{$prefix}stepped-process-link-width: #{$step-link-width};
  --#{$prefix}stepped-process-link-line-height: #{$step-link-line-height};
  --#{$prefix}stepped-process-link-color: #{$step-link-color};
  --#{$prefix}stepped-process-link-active-color: #{$step-link-active-color};
  --#{$prefix}stepped-process-link-next-color: #{$step-link-next-color};
  --#{$prefix}stepped-process-link-marker: #{$step-link-marker};
  --#{$prefix}stepped-process-link-text-decoration: #{$step-link-text-decoration};

  @include media-breakpoint-up(sm) {
    --#{$prefix}stepped-process-item-padding-x: 0;
    --#{$prefix}stepped-process-item-margin-end: 0;
    --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-drop-shadow};
    --#{$prefix}stepped-process-item-arrow-width: #{$step-item-arrow-width};
  }

  @include media-breakpoint-up(xl) {
    --#{$prefix}stepped-process-link-width: none;
    --#{$prefix}stepped-process-link-marker: #{$step-link-marker-lg};
  }

Customization through CSS variables can be seen on the .stepped-process-dark modifier class where we override specific values without adding duplicate CSS selectors.

  --#{$prefix}stepped-process-item-bg: #{$step-item-dark-bg};
  --#{$prefix}stepped-process-item-active-bg: #{$step-item-dark-active-bg};
  --#{$prefix}stepped-process-item-next-bg: #{$step-item-dark-next-bg};
  --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-dark-drop-shadow};
  --#{$prefix}stepped-process-link-color: #{$step-link-dark-color};
  --#{$prefix}stepped-process-link-active-color: #{$step-link-dark-active-color};
  --#{$prefix}stepped-process-link-next-color: #{$step-link-dark-next-color};

Sass variables

Variables for all stepped processes:

$stepped-process-font-size:   $small-font-size;
$stepped-process-font-weight: $font-weight-bold;
$stepped-process-max-items:   5;
$stepped-process-counter:     step; // Used as a counter name

$step-item-padding:           7px;
// fusv-disable
$step-item-padding-end:       $step-item-padding * 2;
// fusv-enable
$step-item-margin-end:        $border-width;
$step-item-bg:                $black;
$step-item-active-bg:         $primary;
$step-item-next-bg:           $gray-400;
$step-item-shadow-size:       $border-width * 1.5;
$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $white) #{"*/"};

$step-item-arrow-width:       .8125rem;
$step-item-arrow-shape:       polygon(0% 0%, 1px 0%, subtract(100%, $border-width) 50%, 1px 100%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, subtract(100%, 1px) 0%, $border-width 50%, subtract(100%, 1px) 100%, 100% 100%) #{"*/"}; // Used in clip-path

$step-link-width:             1.25ch; // Matches width of a single number
$step-link-color:             $white;
$step-link-active-color:      $black;
$step-link-next-color:        $black;
$step-link-line-height:       $line-height-sm;
$step-link-marker:            counter(var(--bs-stepped-process-counter)) inspect("\A0");
$step-link-marker-lg:         counter(var(--bs-stepped-process-counter)) inspect(".\A0");
$step-link-text-decoration:   $link-decoration;


// scss-docs-start stepped-process-dark-variables
$step-item-dark-bg:           $white;
$step-item-dark-active-bg:    $brand-orange;
$step-item-dark-next-bg:      $gray-700;
$step-item-dark-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $black) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $black) #{"*/"};
$step-link-dark-color:        $black;
$step-link-dark-active-color: $black;
$step-link-dark-next-color:   $white;

Variables for the dark stepped process:

$step-item-dark-bg:           $white;
$step-item-dark-active-bg:    $brand-orange;
$step-item-dark-next-bg:      $gray-700;
$step-item-dark-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $black) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $black) #{"*/"};
$step-link-dark-color:        $black;
$step-link-dark-active-color: $black;
$step-link-dark-next-color:   $white;