DSFR v1.12.0

Retour

Navigation principale (navigation)

La navigation principale est l'élément central de la navigation au sein du site, il oriente l’utilisateur à travers les grandes sections du site et sur éventuellement plusieurs niveaux de profondeur.

Documentation

Navigation Principale

<nav class="fr-nav" id="navigation-6676" role="navigation" aria-label="Menu principal">
    <ul class="fr-nav__list">
        <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6678">Entrée menu</button>
            <div class="fr-collapse fr-menu" id="collapse-6678">
                <ul class="fr-menu__list">
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6679">Lien de navigation nav-6679</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6680">Lien de navigation nav-6680</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6681">Lien de navigation nav-6681</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6682">Lien de navigation nav-6682</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6683">Lien de navigation nav-6683</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6684">Lien de navigation nav-6684</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6685">Lien de navigation nav-6685</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6686">Lien de navigation nav-6686</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6688">Entrée mega menu</button>
            <div class="fr-collapse fr-mega-menu" id="collapse-6688">
                <div class="fr-container fr-container--fluid fr-container-lg">
                    <div class="fr-grid-row fr-grid-row-lg--gutters">
                        <div class="fr-col-12 fr-mb-n3v">
                            <button aria-controls="collapse-6688" id="button-6824" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6689">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6690">Lien de navigation nav-6690</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6691">Lien de navigation nav-6691</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6692">Lien de navigation nav-6692</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6693">Lien de navigation nav-6693</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6694">Lien de navigation nav-6694</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6695">Lien de navigation nav-6695</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6696">Lien de navigation nav-6696</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6697">Lien de navigation nav-6697</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6698">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6699">Lien de navigation nav-6699</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6700">Lien de navigation nav-6700</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6701">Lien de navigation nav-6701</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6702">Lien de navigation nav-6702</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6703">Lien de navigation nav-6703</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6704">Lien de navigation nav-6704</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6705">Lien de navigation nav-6705</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6706">Lien de navigation nav-6706</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6707">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6708">Lien de navigation nav-6708</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6709">Lien de navigation nav-6709</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6710" aria-current="page">Lien de navigation nav-6710</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6711">Lien de navigation nav-6711</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6712">Lien de navigation nav-6712</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6713">Lien de navigation nav-6713</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6714">Lien de navigation nav-6714</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6715">Lien de navigation nav-6715</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6716">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6717">Lien de navigation nav-6717</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6718">Lien de navigation nav-6718</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6719">Lien de navigation nav-6719</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6720">Lien de navigation nav-6720</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6721">Lien de navigation nav-6721</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6722">Lien de navigation nav-6722</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6723">Lien de navigation nav-6723</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6724">Lien de navigation nav-6724</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="fr-nav__item">
            <a class="fr-nav__link" href="#" id="nav-6725">accès direct nav-6725</a>
        </li>
        <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6727" aria-current="true">Entrée menu</button>
            <div class="fr-collapse fr-menu" id="collapse-6727">
                <ul class="fr-menu__list">
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6728">Lien de navigation nav-6728</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6729">Lien de navigation nav-6729</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6730" aria-current="page">Lien de navigation nav-6730</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6731">Lien de navigation nav-6731</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6732">Lien de navigation nav-6732</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6733">Lien de navigation nav-6733</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6734">Lien de navigation nav-6734</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6735">Lien de navigation nav-6735</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6737">Entrée mega menu</button>
            <div class="fr-collapse fr-mega-menu" id="collapse-6737">
                <div class="fr-container fr-container--fluid fr-container-lg">
                    <div class="fr-grid-row fr-grid-row-lg--gutters">
                        <div class="fr-col-12 fr-mb-n3v">
                            <button aria-controls="collapse-6737" id="button-6825" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                        </div>
                        <div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
                            <div class="fr-mega-menu__leader">
                                <h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
                                <p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
                                <a id="link-6738" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
                            </div>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6739">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6740">Lien de navigation nav-6740</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6741">Lien de navigation nav-6741</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6742">Lien de navigation nav-6742</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6743">Lien de navigation nav-6743</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6744">Lien de navigation nav-6744</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6745">Lien de navigation nav-6745</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6746">Lien de navigation nav-6746</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6747">Lien de navigation nav-6747</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6748">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6749">Lien de navigation nav-6749</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6750">Lien de navigation nav-6750</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6751">Lien de navigation nav-6751</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6752">Lien de navigation nav-6752</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6753">Lien de navigation nav-6753</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6754">Lien de navigation nav-6754</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6755">Lien de navigation nav-6755</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6756">Lien de navigation nav-6756</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6757">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6758">Lien de navigation nav-6758</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6759">Lien de navigation nav-6759</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6760" aria-current="page">Lien de navigation nav-6760</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6761">Lien de navigation nav-6761</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6762">Lien de navigation nav-6762</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6763">Lien de navigation nav-6763</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6764">Lien de navigation nav-6764</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6765">Lien de navigation nav-6765</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6766">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6767">Lien de navigation nav-6767</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6768">Lien de navigation nav-6768</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6769">Lien de navigation nav-6769</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6770">Lien de navigation nav-6770</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6771">Lien de navigation nav-6771</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6772">Lien de navigation nav-6772</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6773">Lien de navigation nav-6773</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6774">Lien de navigation nav-6774</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="fr-nav__item">
            <a class="fr-nav__link" href="#" id="nav-6775">accès direct nav-6775</a>
        </li>
        <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6777">Entrée mega menu</button>
            <div class="fr-collapse fr-mega-menu" id="collapse-6777">
                <div class="fr-container fr-container--fluid fr-container-lg">
                    <div class="fr-grid-row fr-grid-row-lg--gutters">
                        <div class="fr-col-12 fr-mb-n3v">
                            <button aria-controls="collapse-6777" id="button-6826" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6778">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6779">Lien de navigation nav-6779</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6780">Lien de navigation nav-6780</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6781">Lien de navigation nav-6781</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6782">Lien de navigation nav-6782</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6783">Lien de navigation nav-6783</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6784">Lien de navigation nav-6784</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6785">Lien de navigation nav-6785</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6786">Lien de navigation nav-6786</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6787">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6788">Lien de navigation nav-6788</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6789">Lien de navigation nav-6789</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6790">Lien de navigation nav-6790</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6791">Lien de navigation nav-6791</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6792">Lien de navigation nav-6792</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6793">Lien de navigation nav-6793</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6794">Lien de navigation nav-6794</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6795">Lien de navigation nav-6795</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6796">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6797">Lien de navigation nav-6797</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6798">Lien de navigation nav-6798</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6799" aria-current="page">Lien de navigation nav-6799</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6800">Lien de navigation nav-6800</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6801">Lien de navigation nav-6801</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6802">Lien de navigation nav-6802</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6803">Lien de navigation nav-6803</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6804">Lien de navigation nav-6804</a>
                                </li>
                            </ul>
                        </div>
                        <div class="fr-col-12 fr-col-lg-3">
                            <h5 class="fr-mega-menu__category">
                                <a class="fr-nav__link" href="#" id="category-6805">Nom de catégorie</a>
                            </h5>
                            <ul class="fr-mega-menu__list">
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6806">Lien de navigation nav-6806</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6807">Lien de navigation nav-6807</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6808">Lien de navigation nav-6808</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6809">Lien de navigation nav-6809</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6810">Lien de navigation nav-6810</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6811">Lien de navigation nav-6811</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6812">Lien de navigation nav-6812</a>
                                </li>
                                <li>
                                    <a class="fr-nav__link" href="#" id="nav-6813">Lien de navigation nav-6813</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6815">Entrée menu</button>
            <div class="fr-collapse fr-menu" id="collapse-6815">
                <ul class="fr-menu__list">
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6816">Lien de navigation nav-6816</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6817">Lien de navigation nav-6817</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6818">Lien de navigation nav-6818</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6819">Lien de navigation nav-6819</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6820">Lien de navigation nav-6820</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6821">Lien de navigation nav-6821</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6822">Lien de navigation nav-6822</a>
                    </li>
                    <li>
                        <a class="fr-nav__link" href="#" id="nav-6823">Lien de navigation nav-6823</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

Paramètres d’affichage

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