Indicateur d’étapes

Progression d’une démarche multi-écrans : en-tête, titre, barres d’étapes, détail optionnel ; variante verticale bj-stepper--vertical.

Horizontal (par défaut)

<div class="bj-stepper" role="navigation" aria-label="Étapes">
  <div class="bj-stepper__header">
    <h2 class="bj-stepper__title">Votre dossier</h2>
    <div class="bj-stepper__steps" role="list">
      <div class="bj-stepper__step bj-stepper__step--done" role="listitem">Pièces</div>
      <div class="bj-stepper__step bj-stepper__step--current" role="listitem" aria-current="step">Vérification</div>
      <div class="bj-stepper__step" role="listitem">Validation</div>
    </div>
  </div>
</div>

Vertical

<div class="bj-stepper bj-stepper--vertical" role="navigation" aria-label="Étapes">
  <div class="bj-stepper__header">
    <h2 class="bj-stepper__title">Étapes</h2>
    <div class="bj-stepper__steps" role="list">
      <div class="bj-stepper__step bj-stepper__step--done" role="listitem">1</div>
      <div class="bj-stepper__step bj-stepper__step--current" role="listitem" aria-current="step">2</div>
      <div class="bj-stepper__step" role="listitem">3</div>
    </div>
  </div>
</div>

Avec texte de détail

<div class="bj-stepper" role="navigation" aria-label="Étapes">
  <div class="bj-stepper__header">
    <h2 class="bj-stepper__title">Inscription</h2>
    <div class="bj-stepper__steps" role="list">
      <div class="bj-stepper__step bj-stepper__step--done" role="listitem"></div>
      <div class="bj-stepper__step bj-stepper__step--current" role="listitem" aria-current="step"></div>
      <div class="bj-stepper__step" role="listitem"></div>
    </div>
    <p class="bj-stepper__detail">Complétez les champs obligatoires avant de continuer.</p>
  </div>
</div>

Combinaisons

On peut combiner bj-stepper--vertical avec un bj-stepper__detail ; les modificateurs bj-stepper__step--done et bj-stepper__step--current s’appliquent à chaque étape.

<div class="bj-stepper bj-stepper--vertical" role="navigation" aria-label="Étapes">
  <div class="bj-stepper__header">
    <h2 class="bj-stepper__title">Vertical + détail</h2>
    <div class="bj-stepper__steps" role="list">
      <div class="bj-stepper__step bj-stepper__step--done" role="listitem"></div>
      <div class="bj-stepper__step bj-stepper__step--current" role="listitem" aria-current="step"></div>
      <div class="bj-stepper__step" role="listitem"></div>
    </div>
    <p class="bj-stepper__detail">Dernière ligne droite.</p>
  </div>
</div>

Classes CSS

Classe	Description
`bj-stepper`	Conteneur principal.
`bj-stepper--vertical`	Barres d’étapes en colonne (segments verticaux).
`bj-stepper__header`	Bloc regroupant titre, liste d’étapes et détail (comme <code>BjStepper</code>).
`bj-stepper__title`	Titre de la démarche (<code>h2</code> recommandé).
`bj-stepper__steps`	Conteneur flex des segments d’étape.
`bj-stepper__step`	Segment d’une étape (barre).
`bj-stepper__step--current`	Étape courante.
`bj-stepper__step--done`	Étape terminée.
`bj-stepper__detail`	Texte d’aide sous les étapes.