Fil d'Ariane (breadcrumb)

<nav role="navigation" class="fr-breadcrumb" aria-label="vous êtes ici :">
    <button type="button" class="fr-breadcrumb__button" aria-expanded="false" aria-controls="breadcrumb-3727">Voir le fil d’Ariane</button>
    <div class="fr-collapse" id="breadcrumb-3727">
        <ol class="fr-breadcrumb__list">
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3719">Accueil</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3720">Segment 1: lorem ipsum</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3721">Segment 2: lorem ipsum</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3722">Segment 3: lorem ipsum</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3723">Segment 4: lorem ipsum</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3724">Segment 5: lorem ipsum</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3725">Segment 6: lorem ipsum</button>
            </li>
            <li>
                <button class="fr-breadcrumb__link" type="button" id="breadcrumb-3726">Segment 7: lorem ipsum</button>
            </li>
            <li>
                <a class="fr-breadcrumb__link" aria-current="page">Page Actuelle</a>
            </li>
        </ol>
    </div>
</nav>

<nav role="navigation" class="fr-breadcrumb" aria-label="vous êtes ici :">
    <button type="button" class="fr-breadcrumb__button" aria-expanded="false" aria-controls="breadcrumb-3746">Voir le fil d’Ariane</button>
    <div class="fr-collapse" id="breadcrumb-3746">
        <ol class="fr-breadcrumb__list">
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3738" href="/example">Accueil</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3739" href="/example/segment-1">Segment 1: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3740" href="/example/segment-1/segment-2">Segment 2: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3741" href="/example/segment-1/segment-2/segment-3">Segment 3: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3742" href="/example/segment-1/segment-2/segment-3/segment-4">Segment 4: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3743" href="/example/segment-1/segment-2/segment-3/segment-4/segment-5">Segment 5: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3744" href="/example/segment-1/segment-2/segment-3/segment-4/segment-5/segment-6">Segment 6: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" id="breadcrumb-link-3745" href="/example/segment-1/segment-2/segment-3/segment-4/segment-5/segment-6/segment-7">Segment 7: lorem ipsum</a>
            </li>
            <li>
                <a class="fr-breadcrumb__link" aria-current="page">Page Actuelle</a>
            </li>
        </ol>
    </div>
</nav>