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-5687" 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-5689">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5689">
<ul class="fr-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>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5699">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5699">
<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-5699" id="button-5835" 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-5700">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5701">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5707">Lien de navigation nav-5707</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5708">Lien de navigation nav-5708</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-5709">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5716">Lien de navigation nav-5716</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5717">Lien de navigation nav-5717</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-5718">Nom de catégorie</a>
</h5>
<ul class="fr-mega-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>
<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-5727">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5728">Lien de navigation nav-5728</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5729">Lien de navigation nav-5729</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5730">Lien de navigation nav-5730</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5736">accès direct nav-5736</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5738" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5738">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5739">Lien de navigation nav-5739</a>
</li>
<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" aria-current="page">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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5748">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5748">
<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-5748" id="button-5836" 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-5749" 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-5750">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5751">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5757">Lien de navigation nav-5757</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5758">Lien de navigation nav-5758</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-5759">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5766">Lien de navigation nav-5766</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5767">Lien de navigation nav-5767</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-5768">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5769">Lien de navigation nav-5769</a>
</li>
<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" aria-current="page">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>
</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-5777">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5778">Lien de navigation nav-5778</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5786">accès direct nav-5786</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5788">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5788">
<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-5788" id="button-5837" 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-5789">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5790">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5796">Lien de navigation nav-5796</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5797">Lien de navigation nav-5797</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-5798">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5805">Lien de navigation nav-5805</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5806">Lien de navigation nav-5806</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-5807">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5815">Lien de navigation nav-5815</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-5816">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5817">Lien de navigation nav-5817</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5818">Lien de navigation nav-5818</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5819">Lien de navigation nav-5819</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5820">Lien de navigation nav-5820</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5821">Lien de navigation nav-5821</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5822">Lien de navigation nav-5822</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5823">Lien de navigation nav-5823</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5824">Lien de navigation nav-5824</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5826">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5826">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5827">Lien de navigation nav-5827</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5828">Lien de navigation nav-5828</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5829">Lien de navigation nav-5829</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5830">Lien de navigation nav-5830</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5831">Lien de navigation nav-5831</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5832">Lien de navigation nav-5832</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5833">Lien de navigation nav-5833</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5834">Lien de navigation nav-5834</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>