HTML
            


  
Exemple ci-dessous: on se trouve dans la 2ème sous-étape de l'étape 3 en cours. La value est à 50% car dans l'étape 3 car il y a 4 sous-étapes.


  
Step 3 3 sur 6
  

     3.Name Step 3 Lorem ipsum dolor sit amet, consectetur adipiscing3/6
    

      

        
 Step 1Étape validé
        

           Step 2Étape validé
        
        
 Step 3 Étape actuelle
        
 Step 4 wording un peu long
        
 Step 5
        
 Step 6
      
    
  
  

    Step 3 étape 3/6 progression 50%
  
-->


            
PUG
            
script.
  function toggleDropdown(elem) {
    elem.closest('.dropdown-react').querySelector('.dropdown-container').classList.toggle('show');
    elem.setAttribute('aria-expanded', elem.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
  }
// Wizard step substep
.title-exemple
  h4 Exemple ci-dessous: on se trouve dans la 2ème sous-étape de l'étape 3 en cours. La value est à 50% car dans l'étape 3 car il y a 4 sous-étapes.
.wizard-step
  h1.sr-only(tabindex='-1') Step 3 3 sur 6
  .dropdown-react
    button.dropdown-handler(type="button" aria-expanded="false" onClick="toggleDropdown(this)")
      span 
        span 3.
        | Name Step 3 Lorem ipsum dolor sit amet, consectetur adipiscing
      span 3/6
      
    .dropdown-container.wrapper-step
      ol
        li.dropdown-item.complete
          a(href='#')
            span.marker 
            | Step 1
          span.sr-only Étape validé
        li.dropdown-item.complete
          button(type='button')
            span.marker 
            | Step 2
          span.sr-only Étape validé
        li.dropdown-item.current
          span
            span.marker 
            | Step 3 
          span.sr-only Étape actuelle
        li.dropdown-item.future
          span
            span.marker 
            | Step 4 wording un peu long
        li.dropdown-item.future
          span
            span.marker 
            | Step 5
        li.dropdown-item.future
          span
            span.marker 
            | Step 6

  .wrapper-progress-bar
    span.complete
    span.complete
    progress.wizard-progress-bar.-substep(max="100" aria-hidden='true' value='50')
    span.sr-only Step 3 étape 3/6 progression 50%
    span.future
    span.future
    span.future