HTML
            


  
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
      
    
  
  

    
  
-->


            
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');
  }
// Without substeps
.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(max="100" aria-hidden='true' value='100')
    span.future
    span.future
    span.future