Designsystem

Progress Nav 

<div class="progressnav">
    <ul class="progressnav-items">
        <li class="progressnav-items-item ">
            <a href="#!" aria-current="" class="progressnav-items-item-index no-select"><span>1</span></a>
            <span class="progressnav-items-item-label">Données d&#x27;entreprise</span>
        </li>
        <li class="progressnav-items-item progressnav-items-item-index--active">
            <a href="#!" aria-current="page" class="progressnav-items-item-index no-select"><span>2</span></a>
            <span class="progressnav-items-item-label">Domaine d&#x27;activité</span>
        </li>
        <li class="progressnav-items-item ">
            <a href="#!" aria-current="" class="progressnav-items-item-index no-select"><span>3</span></a>
            <span class="progressnav-items-item-label">Données personnelles</span>
        </li>
        <li class="progressnav-items-item ">
            <a href="#!" aria-current="" class="progressnav-items-item-index no-select"><span>4</span></a>
            <span class="progressnav-items-item-label">Finalisation</span>
        </li>
    </ul>
</div>
 
<div class="progressnav">
        <ul class="progressnav-items">
                {{#each progress_traking.steps}}
                <li class="progressnav-items-item {{class}}">
                        <a href="#!" aria-current="{{aria_current}}" class="progressnav-items-item-index no-select"><span>{{@key}}</span></a>
                        <span class="progressnav-items-item-label">{{text}}</span>
                </li>
                {{/each}}
        </ul>
</div>
 
{
  "progress_traking": {
    "steps": {
      "1": {
        "text": "Données d'entreprise"
      },
      "2": {
        "text": "Domaine d'activité",
        "class": "progressnav-items-item-index--active",
        "aria_current": "page"
      },
      "3": {
        "text": "Données personnelles"
      },
      "4": {
        "text": "Finalisation"
      }
    }
  }
}

There are no notes for this item.