DSFR v1.13.0
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-6261" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-6262" aria-expanded="false" aria-controls="collapse-6263" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6263">
<ul class="fr-menu__list">
<li>
<a id="nav-6264" href="#" class="fr-nav__link">Lien de navigation nav-6264</a>
</li>
<li>
<a id="nav-6265" href="#" class="fr-nav__link">Lien de navigation nav-6265</a>
</li>
<li>
<a id="nav-6266" href="#" class="fr-nav__link">Lien de navigation nav-6266</a>
</li>
<li>
<a id="nav-6267" href="#" class="fr-nav__link">Lien de navigation nav-6267</a>
</li>
<li>
<a id="nav-6268" href="#" class="fr-nav__link">Lien de navigation nav-6268</a>
</li>
<li>
<a id="nav-6269" href="#" class="fr-nav__link">Lien de navigation nav-6269</a>
</li>
<li>
<a id="nav-6270" href="#" class="fr-nav__link">Lien de navigation nav-6270</a>
</li>
<li>
<a id="nav-6271" href="#" class="fr-nav__link">Lien de navigation nav-6271</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6272" aria-expanded="false" aria-controls="collapse-6273" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6273">
<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 aria-controls="collapse-6273" title="Fermer" type="button" id="button-6409" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6274" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6275" href="#" class="fr-nav__link">Lien de navigation nav-6275</a>
</li>
<li>
<a id="nav-6276" href="#" class="fr-nav__link">Lien de navigation nav-6276</a>
</li>
<li>
<a id="nav-6277" href="#" class="fr-nav__link">Lien de navigation nav-6277</a>
</li>
<li>
<a id="nav-6278" href="#" class="fr-nav__link">Lien de navigation nav-6278</a>
</li>
<li>
<a id="nav-6279" href="#" class="fr-nav__link">Lien de navigation nav-6279</a>
</li>
<li>
<a id="nav-6280" href="#" class="fr-nav__link">Lien de navigation nav-6280</a>
</li>
<li>
<a id="nav-6281" href="#" class="fr-nav__link">Lien de navigation nav-6281</a>
</li>
<li>
<a id="nav-6282" href="#" class="fr-nav__link">Lien de navigation nav-6282</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6283" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6284" href="#" class="fr-nav__link">Lien de navigation nav-6284</a>
</li>
<li>
<a id="nav-6285" href="#" class="fr-nav__link">Lien de navigation nav-6285</a>
</li>
<li>
<a id="nav-6286" href="#" class="fr-nav__link">Lien de navigation nav-6286</a>
</li>
<li>
<a id="nav-6287" href="#" class="fr-nav__link">Lien de navigation nav-6287</a>
</li>
<li>
<a id="nav-6288" href="#" class="fr-nav__link">Lien de navigation nav-6288</a>
</li>
<li>
<a id="nav-6289" href="#" class="fr-nav__link">Lien de navigation nav-6289</a>
</li>
<li>
<a id="nav-6290" href="#" class="fr-nav__link">Lien de navigation nav-6290</a>
</li>
<li>
<a id="nav-6291" href="#" class="fr-nav__link">Lien de navigation nav-6291</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6292" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6293" href="#" class="fr-nav__link">Lien de navigation nav-6293</a>
</li>
<li>
<a id="nav-6294" href="#" class="fr-nav__link">Lien de navigation nav-6294</a>
</li>
<li>
<a id="nav-6295" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6295</a>
</li>
<li>
<a id="nav-6296" href="#" class="fr-nav__link">Lien de navigation nav-6296</a>
</li>
<li>
<a id="nav-6297" href="#" class="fr-nav__link">Lien de navigation nav-6297</a>
</li>
<li>
<a id="nav-6298" href="#" class="fr-nav__link">Lien de navigation nav-6298</a>
</li>
<li>
<a id="nav-6299" href="#" class="fr-nav__link">Lien de navigation nav-6299</a>
</li>
<li>
<a id="nav-6300" href="#" class="fr-nav__link">Lien de navigation nav-6300</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6301" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6302" href="#" class="fr-nav__link">Lien de navigation nav-6302</a>
</li>
<li>
<a id="nav-6303" href="#" class="fr-nav__link">Lien de navigation nav-6303</a>
</li>
<li>
<a id="nav-6304" href="#" class="fr-nav__link">Lien de navigation nav-6304</a>
</li>
<li>
<a id="nav-6305" href="#" class="fr-nav__link">Lien de navigation nav-6305</a>
</li>
<li>
<a id="nav-6306" href="#" class="fr-nav__link">Lien de navigation nav-6306</a>
</li>
<li>
<a id="nav-6307" href="#" class="fr-nav__link">Lien de navigation nav-6307</a>
</li>
<li>
<a id="nav-6308" href="#" class="fr-nav__link">Lien de navigation nav-6308</a>
</li>
<li>
<a id="nav-6309" href="#" class="fr-nav__link">Lien de navigation nav-6309</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6310" type="link" href="#" class="fr-nav__link">accès direct nav-6310</a>
</li>
<li class="fr-nav__item">
<button id="menu-6311" aria-expanded="false" aria-controls="collapse-6312" aria-current="true" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6312">
<ul class="fr-menu__list">
<li>
<a id="nav-6313" href="#" class="fr-nav__link">Lien de navigation nav-6313</a>
</li>
<li>
<a id="nav-6314" href="#" class="fr-nav__link">Lien de navigation nav-6314</a>
</li>
<li>
<a id="nav-6315" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6315</a>
</li>
<li>
<a id="nav-6316" href="#" class="fr-nav__link">Lien de navigation nav-6316</a>
</li>
<li>
<a id="nav-6317" href="#" class="fr-nav__link">Lien de navigation nav-6317</a>
</li>
<li>
<a id="nav-6318" href="#" class="fr-nav__link">Lien de navigation nav-6318</a>
</li>
<li>
<a id="nav-6319" href="#" class="fr-nav__link">Lien de navigation nav-6319</a>
</li>
<li>
<a id="nav-6320" href="#" class="fr-nav__link">Lien de navigation nav-6320</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6321" aria-expanded="false" aria-controls="collapse-6322" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6322">
<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 aria-controls="collapse-6322" title="Fermer" type="button" id="button-6410" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<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 id="link-6323" href="[url - à modifier]" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6324" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6325" href="#" class="fr-nav__link">Lien de navigation nav-6325</a>
</li>
<li>
<a id="nav-6326" href="#" class="fr-nav__link">Lien de navigation nav-6326</a>
</li>
<li>
<a id="nav-6327" href="#" class="fr-nav__link">Lien de navigation nav-6327</a>
</li>
<li>
<a id="nav-6328" href="#" class="fr-nav__link">Lien de navigation nav-6328</a>
</li>
<li>
<a id="nav-6329" href="#" class="fr-nav__link">Lien de navigation nav-6329</a>
</li>
<li>
<a id="nav-6330" href="#" class="fr-nav__link">Lien de navigation nav-6330</a>
</li>
<li>
<a id="nav-6331" href="#" class="fr-nav__link">Lien de navigation nav-6331</a>
</li>
<li>
<a id="nav-6332" href="#" class="fr-nav__link">Lien de navigation nav-6332</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6333" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6334" href="#" class="fr-nav__link">Lien de navigation nav-6334</a>
</li>
<li>
<a id="nav-6335" href="#" class="fr-nav__link">Lien de navigation nav-6335</a>
</li>
<li>
<a id="nav-6336" href="#" class="fr-nav__link">Lien de navigation nav-6336</a>
</li>
<li>
<a id="nav-6337" href="#" class="fr-nav__link">Lien de navigation nav-6337</a>
</li>
<li>
<a id="nav-6338" href="#" class="fr-nav__link">Lien de navigation nav-6338</a>
</li>
<li>
<a id="nav-6339" href="#" class="fr-nav__link">Lien de navigation nav-6339</a>
</li>
<li>
<a id="nav-6340" href="#" class="fr-nav__link">Lien de navigation nav-6340</a>
</li>
<li>
<a id="nav-6341" href="#" class="fr-nav__link">Lien de navigation nav-6341</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6342" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6343" href="#" class="fr-nav__link">Lien de navigation nav-6343</a>
</li>
<li>
<a id="nav-6344" href="#" class="fr-nav__link">Lien de navigation nav-6344</a>
</li>
<li>
<a id="nav-6345" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6345</a>
</li>
<li>
<a id="nav-6346" href="#" class="fr-nav__link">Lien de navigation nav-6346</a>
</li>
<li>
<a id="nav-6347" href="#" class="fr-nav__link">Lien de navigation nav-6347</a>
</li>
<li>
<a id="nav-6348" href="#" class="fr-nav__link">Lien de navigation nav-6348</a>
</li>
<li>
<a id="nav-6349" href="#" class="fr-nav__link">Lien de navigation nav-6349</a>
</li>
<li>
<a id="nav-6350" href="#" class="fr-nav__link">Lien de navigation nav-6350</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6351" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6352" href="#" class="fr-nav__link">Lien de navigation nav-6352</a>
</li>
<li>
<a id="nav-6353" href="#" class="fr-nav__link">Lien de navigation nav-6353</a>
</li>
<li>
<a id="nav-6354" href="#" class="fr-nav__link">Lien de navigation nav-6354</a>
</li>
<li>
<a id="nav-6355" href="#" class="fr-nav__link">Lien de navigation nav-6355</a>
</li>
<li>
<a id="nav-6356" href="#" class="fr-nav__link">Lien de navigation nav-6356</a>
</li>
<li>
<a id="nav-6357" href="#" class="fr-nav__link">Lien de navigation nav-6357</a>
</li>
<li>
<a id="nav-6358" href="#" class="fr-nav__link">Lien de navigation nav-6358</a>
</li>
<li>
<a id="nav-6359" href="#" class="fr-nav__link">Lien de navigation nav-6359</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6360" type="link" href="#" class="fr-nav__link">accès direct nav-6360</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6361" aria-expanded="false" aria-controls="collapse-6362" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6362">
<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 aria-controls="collapse-6362" title="Fermer" type="button" id="button-6411" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6363" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6364" href="#" class="fr-nav__link">Lien de navigation nav-6364</a>
</li>
<li>
<a id="nav-6365" href="#" class="fr-nav__link">Lien de navigation nav-6365</a>
</li>
<li>
<a id="nav-6366" href="#" class="fr-nav__link">Lien de navigation nav-6366</a>
</li>
<li>
<a id="nav-6367" href="#" class="fr-nav__link">Lien de navigation nav-6367</a>
</li>
<li>
<a id="nav-6368" href="#" class="fr-nav__link">Lien de navigation nav-6368</a>
</li>
<li>
<a id="nav-6369" href="#" class="fr-nav__link">Lien de navigation nav-6369</a>
</li>
<li>
<a id="nav-6370" href="#" class="fr-nav__link">Lien de navigation nav-6370</a>
</li>
<li>
<a id="nav-6371" href="#" class="fr-nav__link">Lien de navigation nav-6371</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6372" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6373" href="#" class="fr-nav__link">Lien de navigation nav-6373</a>
</li>
<li>
<a id="nav-6374" href="#" class="fr-nav__link">Lien de navigation nav-6374</a>
</li>
<li>
<a id="nav-6375" href="#" class="fr-nav__link">Lien de navigation nav-6375</a>
</li>
<li>
<a id="nav-6376" href="#" class="fr-nav__link">Lien de navigation nav-6376</a>
</li>
<li>
<a id="nav-6377" href="#" class="fr-nav__link">Lien de navigation nav-6377</a>
</li>
<li>
<a id="nav-6378" href="#" class="fr-nav__link">Lien de navigation nav-6378</a>
</li>
<li>
<a id="nav-6379" href="#" class="fr-nav__link">Lien de navigation nav-6379</a>
</li>
<li>
<a id="nav-6380" href="#" class="fr-nav__link">Lien de navigation nav-6380</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6381" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6382" href="#" class="fr-nav__link">Lien de navigation nav-6382</a>
</li>
<li>
<a id="nav-6383" href="#" class="fr-nav__link">Lien de navigation nav-6383</a>
</li>
<li>
<a id="nav-6384" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6384</a>
</li>
<li>
<a id="nav-6385" href="#" class="fr-nav__link">Lien de navigation nav-6385</a>
</li>
<li>
<a id="nav-6386" href="#" class="fr-nav__link">Lien de navigation nav-6386</a>
</li>
<li>
<a id="nav-6387" href="#" class="fr-nav__link">Lien de navigation nav-6387</a>
</li>
<li>
<a id="nav-6388" href="#" class="fr-nav__link">Lien de navigation nav-6388</a>
</li>
<li>
<a id="nav-6389" href="#" class="fr-nav__link">Lien de navigation nav-6389</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6390" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6391" href="#" class="fr-nav__link">Lien de navigation nav-6391</a>
</li>
<li>
<a id="nav-6392" href="#" class="fr-nav__link">Lien de navigation nav-6392</a>
</li>
<li>
<a id="nav-6393" href="#" class="fr-nav__link">Lien de navigation nav-6393</a>
</li>
<li>
<a id="nav-6394" href="#" class="fr-nav__link">Lien de navigation nav-6394</a>
</li>
<li>
<a id="nav-6395" href="#" class="fr-nav__link">Lien de navigation nav-6395</a>
</li>
<li>
<a id="nav-6396" href="#" class="fr-nav__link">Lien de navigation nav-6396</a>
</li>
<li>
<a id="nav-6397" href="#" class="fr-nav__link">Lien de navigation nav-6397</a>
</li>
<li>
<a id="nav-6398" href="#" class="fr-nav__link">Lien de navigation nav-6398</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6399" aria-expanded="false" aria-controls="collapse-6400" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6400">
<ul class="fr-menu__list">
<li>
<a id="nav-6401" href="#" class="fr-nav__link">Lien de navigation nav-6401</a>
</li>
<li>
<a id="nav-6402" href="#" class="fr-nav__link">Lien de navigation nav-6402</a>
</li>
<li>
<a id="nav-6403" href="#" class="fr-nav__link">Lien de navigation nav-6403</a>
</li>
<li>
<a id="nav-6404" href="#" class="fr-nav__link">Lien de navigation nav-6404</a>
</li>
<li>
<a id="nav-6405" href="#" class="fr-nav__link">Lien de navigation nav-6405</a>
</li>
<li>
<a id="nav-6406" href="#" class="fr-nav__link">Lien de navigation nav-6406</a>
</li>
<li>
<a id="nav-6407" href="#" class="fr-nav__link">Lien de navigation nav-6407</a>
</li>
<li>
<a id="nav-6408" href="#" class="fr-nav__link">Lien de navigation nav-6408</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>