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-5136" 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-5138">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5138">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5139">Lien de navigation nav-5139</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5140">Lien de navigation nav-5140</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5141">Lien de navigation nav-5141</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5142">Lien de navigation nav-5142</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5143">Lien de navigation nav-5143</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5144">Lien de navigation nav-5144</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5145">Lien de navigation nav-5145</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5146">Lien de navigation nav-5146</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5148">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5148">
<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-5148" id="button-5284" 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" id="category-5149">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5150">Lien de navigation nav-5150</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5151">Lien de navigation nav-5151</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5152">Lien de navigation nav-5152</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5153">Lien de navigation nav-5153</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5154">Lien de navigation nav-5154</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5155">Lien de navigation nav-5155</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5156">Lien de navigation nav-5156</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5157">Lien de navigation nav-5157</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-5158">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5159">Lien de navigation nav-5159</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5160">Lien de navigation nav-5160</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5161">Lien de navigation nav-5161</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5162">Lien de navigation nav-5162</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5163">Lien de navigation nav-5163</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5164">Lien de navigation nav-5164</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5165">Lien de navigation nav-5165</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5166">Lien de navigation nav-5166</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-5167">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5168">Lien de navigation nav-5168</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5169">Lien de navigation nav-5169</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5170" aria-current="page">Lien de navigation nav-5170</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5171">Lien de navigation nav-5171</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5172">Lien de navigation nav-5172</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5173">Lien de navigation nav-5173</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5174">Lien de navigation nav-5174</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5175">Lien de navigation nav-5175</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-5176">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5177">Lien de navigation nav-5177</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5178">Lien de navigation nav-5178</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5179">Lien de navigation nav-5179</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5180">Lien de navigation nav-5180</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5181">Lien de navigation nav-5181</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5182">Lien de navigation nav-5182</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5183">Lien de navigation nav-5183</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5184">Lien de navigation nav-5184</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5185">accès direct nav-5185</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5187" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5187">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5188">Lien de navigation nav-5188</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5189">Lien de navigation nav-5189</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5190" aria-current="page">Lien de navigation nav-5190</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5191">Lien de navigation nav-5191</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5192">Lien de navigation nav-5192</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5193">Lien de navigation nav-5193</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5194">Lien de navigation nav-5194</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5195">Lien de navigation nav-5195</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5197">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5197">
<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-5197" id="button-5285" 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-5198" 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-5199">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5200">Lien de navigation nav-5200</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5201">Lien de navigation nav-5201</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5202">Lien de navigation nav-5202</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5203">Lien de navigation nav-5203</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5204">Lien de navigation nav-5204</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5205">Lien de navigation nav-5205</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5206">Lien de navigation nav-5206</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5207">Lien de navigation nav-5207</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-5208">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5209">Lien de navigation nav-5209</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5210">Lien de navigation nav-5210</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5211">Lien de navigation nav-5211</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5212">Lien de navigation nav-5212</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5213">Lien de navigation nav-5213</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5214">Lien de navigation nav-5214</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5215">Lien de navigation nav-5215</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5216">Lien de navigation nav-5216</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-5217">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5218">Lien de navigation nav-5218</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5219">Lien de navigation nav-5219</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5220" aria-current="page">Lien de navigation nav-5220</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5221">Lien de navigation nav-5221</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5222">Lien de navigation nav-5222</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5223">Lien de navigation nav-5223</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5224">Lien de navigation nav-5224</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5225">Lien de navigation nav-5225</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-5226">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5227">Lien de navigation nav-5227</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5228">Lien de navigation nav-5228</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5229">Lien de navigation nav-5229</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5230">Lien de navigation nav-5230</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5231">Lien de navigation nav-5231</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5232">Lien de navigation nav-5232</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5233">Lien de navigation nav-5233</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5234">Lien de navigation nav-5234</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5235">accès direct nav-5235</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5237">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5237">
<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-5237" id="button-5286" 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" id="category-5238">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5239">Lien de navigation nav-5239</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5240">Lien de navigation nav-5240</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5241">Lien de navigation nav-5241</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5242">Lien de navigation nav-5242</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5243">Lien de navigation nav-5243</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5244">Lien de navigation nav-5244</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5245">Lien de navigation nav-5245</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5246">Lien de navigation nav-5246</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-5247">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5248">Lien de navigation nav-5248</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5249">Lien de navigation nav-5249</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5250">Lien de navigation nav-5250</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5251">Lien de navigation nav-5251</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5252">Lien de navigation nav-5252</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5253">Lien de navigation nav-5253</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5254">Lien de navigation nav-5254</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5255">Lien de navigation nav-5255</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-5256">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5257">Lien de navigation nav-5257</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5258">Lien de navigation nav-5258</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5259" aria-current="page">Lien de navigation nav-5259</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5260">Lien de navigation nav-5260</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5261">Lien de navigation nav-5261</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5262">Lien de navigation nav-5262</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5263">Lien de navigation nav-5263</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5264">Lien de navigation nav-5264</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-5265">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5266">Lien de navigation nav-5266</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5267">Lien de navigation nav-5267</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5268">Lien de navigation nav-5268</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5269">Lien de navigation nav-5269</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5270">Lien de navigation nav-5270</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5271">Lien de navigation nav-5271</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5272">Lien de navigation nav-5272</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5273">Lien de navigation nav-5273</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5275">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5275">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5276">Lien de navigation nav-5276</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5277">Lien de navigation nav-5277</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5278">Lien de navigation nav-5278</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5279">Lien de navigation nav-5279</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5280">Lien de navigation nav-5280</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5281">Lien de navigation nav-5281</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5282">Lien de navigation nav-5282</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5283">Lien de navigation nav-5283</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>