Designsystem

Breadcrumb 

<nav role="navigation" aria-label="Fil d'Arianne">
    <a href="#!" class="breadcrumb-back"><i class="icon icon-arrow-left"></i></a>
    <ul class="breadcrumb breadcrumb-is-closed">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item"><a href="#">Actualités</a></li>
        <li class="breadcrumb-item"><a href="#">Programme</a></li>
    </ul>
</nav>

<script src="../../js/framework/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        $(".breadcrumb-item:first-child").on("click", function(e) {
            e.preventDefault();
            $(this).parents('.breadcrumb').toggleClass("breadcrumb-is-closed");
        })
    });
</script>
 
<nav role="navigation" aria-label="Fil d'Arianne">
  <a href="#!" class="breadcrumb-back"><i class="icon icon-arrow-left"></i></a>
  <ul class="breadcrumb breadcrumb-is-closed">
    {{#each breadcrumb.path}}
    <li class="breadcrumb-item"><a href="#">{{this}}</a></li>
    {{/each}}
  </ul>
</nav>

<script src="../../js/framework/jquery-3.4.1.min.js"></script>
<script>
  $(document).ready(function () {
    $(".breadcrumb-item:first-child").on("click", function (e) {
      e.preventDefault();
      $(this).parents('.breadcrumb').toggleClass("breadcrumb-is-closed");
    })
  });
</script>
 
{
  "breadcrumb": {
    "path": [
      "Accueil",
      "Actualités",
      "Programme"
    ]
  }
}

There are no notes for this item.