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-5160" 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-5162">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5162">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5167">Lien de navigation nav-5167</a>
</li>
<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">Lien de navigation nav-5170</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5172">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5172">
<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-5172" id="button-5308" 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-5173">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5176">Lien de navigation nav-5176</a>
</li>
<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>
</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-5182">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5185">Lien de navigation nav-5185</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5186">Lien de navigation nav-5186</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5187">Lien de navigation nav-5187</a>
</li>
<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">Lien de navigation nav-5190</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-5191">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5196">Lien de navigation nav-5196</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5197">Lien de navigation nav-5197</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5198">Lien de navigation nav-5198</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5199">Lien de navigation nav-5199</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-5200">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5208">Lien de navigation nav-5208</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5209">accès direct nav-5209</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5211" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5211">
<ul class="fr-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5217">Lien de navigation nav-5217</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5221">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5221">
<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-5221" id="button-5309" 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-5222" 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-5223">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5226">Lien de navigation nav-5226</a>
</li>
<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>
</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-5232">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5235">Lien de navigation nav-5235</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5236">Lien de navigation nav-5236</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5237">Lien de navigation nav-5237</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5238">Lien de navigation nav-5238</a>
</li>
<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>
</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-5241">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5247">Lien de navigation nav-5247</a>
</li>
<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>
</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-5250">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5256">Lien de navigation nav-5256</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5259">accès direct nav-5259</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5261">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5261">
<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-5261" id="button-5310" 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-5262">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5265">Lien de navigation nav-5265</a>
</li>
<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>
</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-5271">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5274">Lien de navigation nav-5274</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5275">Lien de navigation nav-5275</a>
</li>
<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>
</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-5280">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page">Lien de navigation nav-5283</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5284">Lien de navigation nav-5284</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5285">Lien de navigation nav-5285</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5286">Lien de navigation nav-5286</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5287">Lien de navigation nav-5287</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5288">Lien de navigation nav-5288</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-5289">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5290">Lien de navigation nav-5290</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5291">Lien de navigation nav-5291</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5292">Lien de navigation nav-5292</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5293">Lien de navigation nav-5293</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5294">Lien de navigation nav-5294</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5295">Lien de navigation nav-5295</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5296">Lien de navigation nav-5296</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5297">Lien de navigation nav-5297</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5299">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5299">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5300">Lien de navigation nav-5300</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5301">Lien de navigation nav-5301</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5302">Lien de navigation nav-5302</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5303">Lien de navigation nav-5303</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5304">Lien de navigation nav-5304</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5305">Lien de navigation nav-5305</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5306">Lien de navigation nav-5306</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5307">Lien de navigation nav-5307</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>