Skip to main content
Step indicator component displaying circular dots to show progress through a multi-step flow. Highlights the current active step with primary color.

Import

import { BreadCrumb } from '@adoptaunabuelo/react-components';

Props

steps
number
required
Total number of steps to display
selectedStep
number
default:"0"
Current active step index (0-based)
style
React.CSSProperties
Custom styles for the container

Usage

<BreadCrumb steps={4} selectedStep={1} />

Notes

  • selectedStep is 0-based (first step is 0)
  • Active step is highlighted with primary background color
  • Inactive steps use low-opacity text color
  • Each step is displayed as a circular dot (8px diameter)

Build docs developers (and LLMs) love