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

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>
  );
}

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