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-1042" 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="menu-1043">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-1043">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-1044">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-1044">
<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="mega-menu-1044" 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" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-1045" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-1045">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-1046">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-1046">
<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="mega-menu-1046" 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" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-1047">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-1047">
<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="mega-menu-1047" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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" aria-current="true">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-1048">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-1048">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>