Retour

Fil d'Ariane (breadcrumb)

Le fil d’Ariane est un système de navigation secondaire qui permet à l’utilisateur de se situer sur le site qu’il consulte.

Documentation

Fil d’Ariane avec boutons

<nav role="navigation" class="village-breadcrumb" aria-label="vous êtes ici :">
    <button class="village-breadcrumb__button" aria-expanded="false" aria-controls="breadcrumb-4268">Voir le fil d’Ariane</button>
    <div class="village-collapse" id="breadcrumb-4268">
        <ol class="village-breadcrumb__list">
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4260">Accueil</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4261">Segment 1: lorem ipsum</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4262">Segment 2: lorem ipsum</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4263">Segment 3: lorem ipsum</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4264">Segment 4: lorem ipsum</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4265">Segment 5: lorem ipsum</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4266">Segment 6: lorem ipsum</button>
            </li>
            <li>
                <button class="village-breadcrumb__link" id="breadcrumb-4267">Segment 7: lorem ipsum</button>
            </li>
            <li>
                <a class="village-breadcrumb__link" aria-current="page">Page Actuelle</a>
            </li>
        </ol>
    </div>
</nav>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.