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-3972" 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-3974">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3974">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3975">Lien de navigation nav-3975</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3976">Lien de navigation nav-3976</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3977">Lien de navigation nav-3977</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3978">Lien de navigation nav-3978</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3979">Lien de navigation nav-3979</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3980">Lien de navigation nav-3980</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3981">Lien de navigation nav-3981</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3982">Lien de navigation nav-3982</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3984">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3984">
<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-3984" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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" id="nav-3985">Lien de navigation nav-3985</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3986">Lien de navigation nav-3986</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3987">Lien de navigation nav-3987</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3988">Lien de navigation nav-3988</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3989">Lien de navigation nav-3989</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3990">Lien de navigation nav-3990</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3991">Lien de navigation nav-3991</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3992">Lien de navigation nav-3992</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" id="nav-3993">Lien de navigation nav-3993</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3994">Lien de navigation nav-3994</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3995">Lien de navigation nav-3995</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3996">Lien de navigation nav-3996</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3997">Lien de navigation nav-3997</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3998">Lien de navigation nav-3998</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3999">Lien de navigation nav-3999</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4000">Lien de navigation nav-4000</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" id="nav-4001">Lien de navigation nav-4001</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4002">Lien de navigation nav-4002</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4003" aria-current="page">Lien de navigation nav-4003</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4004">Lien de navigation nav-4004</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4005">Lien de navigation nav-4005</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4006">Lien de navigation nav-4006</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4007">Lien de navigation nav-4007</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4008">Lien de navigation nav-4008</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" id="nav-4009">Lien de navigation nav-4009</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4010">Lien de navigation nav-4010</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4011">Lien de navigation nav-4011</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4012">Lien de navigation nav-4012</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4013">Lien de navigation nav-4013</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4014">Lien de navigation nav-4014</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4015">Lien de navigation nav-4015</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4016">Lien de navigation nav-4016</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-4017">accès direct nav-4017</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4019" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4019">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4020">Lien de navigation nav-4020</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4021">Lien de navigation nav-4021</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4022" aria-current="page">Lien de navigation nav-4022</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4023">Lien de navigation nav-4023</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4024">Lien de navigation nav-4024</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4025">Lien de navigation nav-4025</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4026">Lien de navigation nav-4026</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4027">Lien de navigation nav-4027</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4029">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4029">
<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-4029" 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-4030" 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" id="nav-4031">Lien de navigation nav-4031</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4032">Lien de navigation nav-4032</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4033">Lien de navigation nav-4033</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4034">Lien de navigation nav-4034</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4035">Lien de navigation nav-4035</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4036">Lien de navigation nav-4036</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4037">Lien de navigation nav-4037</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4038">Lien de navigation nav-4038</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" id="nav-4039">Lien de navigation nav-4039</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4040">Lien de navigation nav-4040</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4041">Lien de navigation nav-4041</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4042">Lien de navigation nav-4042</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4043">Lien de navigation nav-4043</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4044">Lien de navigation nav-4044</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4045">Lien de navigation nav-4045</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4046">Lien de navigation nav-4046</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" id="nav-4047">Lien de navigation nav-4047</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4048">Lien de navigation nav-4048</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4049" aria-current="page">Lien de navigation nav-4049</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4050">Lien de navigation nav-4050</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4051">Lien de navigation nav-4051</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4052">Lien de navigation nav-4052</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4053">Lien de navigation nav-4053</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4054">Lien de navigation nav-4054</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" id="nav-4055">Lien de navigation nav-4055</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4056">Lien de navigation nav-4056</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4057">Lien de navigation nav-4057</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4058">Lien de navigation nav-4058</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4059">Lien de navigation nav-4059</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4060">Lien de navigation nav-4060</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4061">Lien de navigation nav-4061</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4062">Lien de navigation nav-4062</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-4063">accès direct nav-4063</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4065">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-4065">
<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-4065" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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" id="nav-4066">Lien de navigation nav-4066</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4067">Lien de navigation nav-4067</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4068">Lien de navigation nav-4068</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4069">Lien de navigation nav-4069</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4070">Lien de navigation nav-4070</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4071">Lien de navigation nav-4071</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4072">Lien de navigation nav-4072</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4073">Lien de navigation nav-4073</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" id="nav-4074">Lien de navigation nav-4074</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4075">Lien de navigation nav-4075</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4076">Lien de navigation nav-4076</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4077">Lien de navigation nav-4077</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4078">Lien de navigation nav-4078</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4079">Lien de navigation nav-4079</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4080">Lien de navigation nav-4080</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4081">Lien de navigation nav-4081</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" id="nav-4082">Lien de navigation nav-4082</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4083">Lien de navigation nav-4083</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4084" aria-current="page">Lien de navigation nav-4084</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4085">Lien de navigation nav-4085</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4086">Lien de navigation nav-4086</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4087">Lien de navigation nav-4087</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4088">Lien de navigation nav-4088</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4089">Lien de navigation nav-4089</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" id="nav-4090">Lien de navigation nav-4090</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4091">Lien de navigation nav-4091</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4092">Lien de navigation nav-4092</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4093">Lien de navigation nav-4093</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4094">Lien de navigation nav-4094</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4095">Lien de navigation nav-4095</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4096">Lien de navigation nav-4096</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4097">Lien de navigation nav-4097</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-4099">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-4099">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4100">Lien de navigation nav-4100</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4101">Lien de navigation nav-4101</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4102">Lien de navigation nav-4102</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4103">Lien de navigation nav-4103</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4104">Lien de navigation nav-4104</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4105">Lien de navigation nav-4105</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4106">Lien de navigation nav-4106</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-4107">Lien de navigation nav-4107</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>