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<nav class="fr-nav" id="navigation-5667" 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-5669">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5669">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5670">Lien de navigation nav-5670</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5671">Lien de navigation nav-5671</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5672">Lien de navigation nav-5672</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5673">Lien de navigation nav-5673</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5674">Lien de navigation nav-5674</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5675">Lien de navigation nav-5675</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5676">Lien de navigation nav-5676</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5677">Lien de navigation nav-5677</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5679">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5679">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-5679" id="button-5815" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-5680">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5681">Lien de navigation nav-5681</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5682">Lien de navigation nav-5682</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5683">Lien de navigation nav-5683</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5684">Lien de navigation nav-5684</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5685">Lien de navigation nav-5685</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5686">Lien de navigation nav-5686</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5687">Lien de navigation nav-5687</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5688">Lien de navigation nav-5688</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="#" target="_self" id="category-5689">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5690">Lien de navigation nav-5690</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5691">Lien de navigation nav-5691</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5692">Lien de navigation nav-5692</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5693">Lien de navigation nav-5693</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5694">Lien de navigation nav-5694</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5695">Lien de navigation nav-5695</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5696">Lien de navigation nav-5696</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5697">Lien de navigation nav-5697</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="#" target="_self" id="category-5698">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5699">Lien de navigation nav-5699</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5700">Lien de navigation nav-5700</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5701" aria-current="page">Lien de navigation nav-5701</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5702">Lien de navigation nav-5702</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5703">Lien de navigation nav-5703</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5704">Lien de navigation nav-5704</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5705">Lien de navigation nav-5705</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5706">Lien de navigation nav-5706</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="#" target="_self" id="category-5707">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5708">Lien de navigation nav-5708</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5709">Lien de navigation nav-5709</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5710">Lien de navigation nav-5710</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5711">Lien de navigation nav-5711</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5712">Lien de navigation nav-5712</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5713">Lien de navigation nav-5713</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5714">Lien de navigation nav-5714</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5715">Lien de navigation nav-5715</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5716">accès direct nav-5716</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5718" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5718">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5719">Lien de navigation nav-5719</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5720">Lien de navigation nav-5720</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5721" aria-current="page">Lien de navigation nav-5721</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5722">Lien de navigation nav-5722</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5723">Lien de navigation nav-5723</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5724">Lien de navigation nav-5724</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5725">Lien de navigation nav-5725</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5726">Lien de navigation nav-5726</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5728">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5728">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-5728" id="button-5816" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-5729" href="#">
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="#" target="_self" id="category-5730">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5731">Lien de navigation nav-5731</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5732">Lien de navigation nav-5732</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5733">Lien de navigation nav-5733</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5734">Lien de navigation nav-5734</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5735">Lien de navigation nav-5735</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5736">Lien de navigation nav-5736</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5737">Lien de navigation nav-5737</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5738">Lien de navigation nav-5738</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="#" target="_self" id="category-5739">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5740">Lien de navigation nav-5740</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5741">Lien de navigation nav-5741</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5742">Lien de navigation nav-5742</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5743">Lien de navigation nav-5743</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5744">Lien de navigation nav-5744</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5745">Lien de navigation nav-5745</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5746">Lien de navigation nav-5746</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5747">Lien de navigation nav-5747</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="#" target="_self" id="category-5748">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5749">Lien de navigation nav-5749</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5750">Lien de navigation nav-5750</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5751" aria-current="page">Lien de navigation nav-5751</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5752">Lien de navigation nav-5752</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5753">Lien de navigation nav-5753</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5754">Lien de navigation nav-5754</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5755">Lien de navigation nav-5755</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5756">Lien de navigation nav-5756</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="#" target="_self" id="category-5757">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5758">Lien de navigation nav-5758</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5759">Lien de navigation nav-5759</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5760">Lien de navigation nav-5760</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5761">Lien de navigation nav-5761</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5762">Lien de navigation nav-5762</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5763">Lien de navigation nav-5763</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5764">Lien de navigation nav-5764</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5765">Lien de navigation nav-5765</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5766">accès direct nav-5766</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5768">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5768">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-5768" id="button-5817" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-5769">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5770">Lien de navigation nav-5770</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5771">Lien de navigation nav-5771</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5772">Lien de navigation nav-5772</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5773">Lien de navigation nav-5773</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5774">Lien de navigation nav-5774</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5775">Lien de navigation nav-5775</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5776">Lien de navigation nav-5776</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5777">Lien de navigation nav-5777</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="#" target="_self" id="category-5778">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5779">Lien de navigation nav-5779</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5780">Lien de navigation nav-5780</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5781">Lien de navigation nav-5781</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5782">Lien de navigation nav-5782</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5783">Lien de navigation nav-5783</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5784">Lien de navigation nav-5784</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5785">Lien de navigation nav-5785</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5786">Lien de navigation nav-5786</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="#" target="_self" id="category-5787">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5788">Lien de navigation nav-5788</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5789">Lien de navigation nav-5789</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5790" aria-current="page">Lien de navigation nav-5790</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5791">Lien de navigation nav-5791</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5792">Lien de navigation nav-5792</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5793">Lien de navigation nav-5793</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5794">Lien de navigation nav-5794</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5795">Lien de navigation nav-5795</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="#" target="_self" id="category-5796">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5797">Lien de navigation nav-5797</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5798">Lien de navigation nav-5798</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5799">Lien de navigation nav-5799</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5800">Lien de navigation nav-5800</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5801">Lien de navigation nav-5801</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5802">Lien de navigation nav-5802</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5803">Lien de navigation nav-5803</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5804">Lien de navigation nav-5804</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5806">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5806">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5807">Lien de navigation nav-5807</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5808">Lien de navigation nav-5808</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5809">Lien de navigation nav-5809</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5810">Lien de navigation nav-5810</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5811">Lien de navigation nav-5811</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5812">Lien de navigation nav-5812</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5813">Lien de navigation nav-5813</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5814">Lien de navigation nav-5814</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>