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-5157" 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-5159">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5159">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5167">Lien de navigation nav-5167</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5169">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5169">
<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-5169" id="button-5305" 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-5170">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</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-5179">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</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-5188">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5191" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5196">Lien de navigation nav-5196</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-5197">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5206">accès direct nav-5206</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5208" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5208">
<ul class="fr-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" aria-current="page">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>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5218">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5218">
<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-5218" id="button-5306" 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-5219" 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-5220">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</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-5229">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</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-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" aria-current="page">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-5256">accès direct nav-5256</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5258">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5258">
<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-5258" id="button-5307" 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-5259">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</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-5268">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</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-5277">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page">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>
<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>
</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-5286">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5289">Lien de navigation nav-5289</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-5296">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5296">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5297">Lien de navigation nav-5297</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5298">Lien de navigation nav-5298</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-5299">Lien de navigation nav-5299</a>
</li>
<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>
</ul>
</div>
</li>
</ul>
</nav>