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.

Using more than 5 items in a row? You can easily customize this by changing $stepped-process-max-items Sass variable.

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

Deprecated in v5.3.3

Heads up! Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.

Add data-bs-theme="dark" to the .stepped-process or any ancestor element to enable a component-specific color mode. Learn more about our color modes.

CSS

Variables

Added in v5.2.0

As part of Boosted’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.

scss/_stepped-process.scss

--#{$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-bg: #{$stepped-process-bg};
--#{$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};
}

Sass variables

scss/_variables.scss

$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
$stepped-process-bg:          var(--#{$prefix}body-bg);

$step-item-padding:           7px;
// fusv-disable
$step-item-padding-end:       $step-item-padding * 2; // Deprecated in v5.2.0
// fusv-enable
$step-item-margin-end:        var(--#{$prefix}border-width);
$step-item-bg:                var(--#{$prefix}secondary);
$step-item-active-bg:         $supporting-orange;
$step-item-next-bg:           var(--#{$prefix}border-color-subtle);
$step-item-shadow-size:       calc(var(--#{$prefix}border-width) * 1.5); // stylelint-disable-line function-disallowed-list
$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"}; // stylelint-disable-line function-disallowed-list

$step-item-arrow-width:       .8125rem;
$step-item-arrow-shape:       polygon(0% 0%, 1px 0%, subtract(100%, var(--#{$prefix}border-width)) 50%, 1px 100%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, subtract(100%, 1px) 0%, var(--#{$prefix}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:             var(--#{$prefix}highlight-color);
$step-link-active-color:      $black;
$step-link-active-outline:    $black;
$step-link-next-color:        var(--#{$prefix}link-color);
$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;