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-847" 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-848">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-848">
<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-849">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-849">
<div class="fr-container fr-container--fluid fr-container-lg">
<button class="fr-link--close fr-link" aria-controls="mega-menu-849">Fermer</button>
<div class="fr-grid-row fr-grid-row-lg--gutters">
<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-displayed-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" 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-850" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-850">
<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-851">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-851">
<div class="fr-container fr-container--fluid fr-container-lg">
<button class="fr-link--close fr-link" aria-controls="mega-menu-851">Fermer</button>
<div class="fr-grid-row fr-grid-row-lg--gutters">
<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-displayed-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" 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-852">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-852">
<div class="fr-container fr-container--fluid fr-container-lg">
<button class="fr-link--close fr-link" aria-controls="mega-menu-852">Fermer</button>
<div class="fr-grid-row fr-grid-row-lg--gutters">
<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-853">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-853">
<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>