Bifrost Design System

Skip to main content

import StepBar from "@intility/bifrost-react/StepBar";

StepBar

Props

Default StepBar

Useful for wizards. Set active prop to highlight the current step.

Clickable steps

Wrap each step in a link, use active css class on the link instead of the prop.

Circle variant

Only numbers displayed for small screens

For small mobile screens (under 600px), only numbers will be displayed for the steps not currently active (try resizing your window). This can be disabled with disableCollapse prop (not recommended).