Bifrost Design System

StepBar

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

Default StepBar

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

<StepBar>
  <StepBar.Item>1 Imprisoned monologue</StepBar.Item>
  <StepBar.Item active>2 Gladiator fight</StepBar.Item>
  <StepBar.Item>3 Escape</StepBar.Item>
  <StepBar.Item>4 Ragnarok</StepBar.Item>
</StepBar>

1 Imprisoned monologue

2 Gladiator fight

3 Escape

4 Ragnarok

Clickable steps

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

import { useState } from "react";
import StepBar from "@intility/bifrost-react/StepBar";

const steps = ["Imprisoned monologue", "Gladiator fight", "Escape", "Ragnarok"];

export default function () {
  const [activeStep, setActiveStep] = useState(steps[0]);
  const handleClick = (event, step) => {
    event.preventDefault();
    setActiveStep(step);
  };
  return (
    <StepBar
    // variant="circle"
    >
      {steps.map((step, index) => (
        <a
          href={step}
          key={step}
          // for demo purposes only.
          // you'd likely have a href url on the link instead
          onClick={(event) => handleClick(event, step)}
          // react-router <NavLink> applies an 'active' css class by default
          className={activeStep === step ? "active" : ""}
        >
          <StepBar.Item>
            {index + 1} {step}
          </StepBar.Item>
        </a>
      ))}
    </StepBar>
  );
}

Open Sandbox

Circle variant

<StepBar variant="circle">
  <StepBar.Item>1 Imprisoned monologue</StepBar.Item>
  <StepBar.Item>2 Gladiator</StepBar.Item>
  <StepBar.Item active>3 Escape</StepBar.Item>
  <StepBar.Item>4 Ragnarok</StepBar.Item>
</StepBar>

1 Imprisoned monologue

2 Gladiator

3 Escape

4 Ragnarok

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).