DSFR v1.15.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-6265" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-6266" aria-expanded="false" aria-controls="collapse-6267" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6267">
<ul class="fr-menu__list">
<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>
<li>
<a id="nav-6272" href="#" class="fr-nav__link">Lien de navigation nav-6272</a>
</li>
<li>
<a id="nav-6273" href="#" class="fr-nav__link">Lien de navigation nav-6273</a>
</li>
<li>
<a id="nav-6274" href="#" class="fr-nav__link">Lien de navigation nav-6274</a>
</li>
<li>
<a id="nav-6275" href="#" class="fr-nav__link">Lien de navigation nav-6275</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6276" aria-expanded="false" aria-controls="collapse-6277" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6277">
<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-6277" title="Fermer" type="button" id="button-6413" 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-6278" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6283" href="#" class="fr-nav__link">Lien de navigation nav-6283</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6287" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6292" href="#" class="fr-nav__link">Lien de navigation nav-6292</a>
</li>
<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" href="#" class="fr-nav__link">Lien de navigation nav-6295</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6296" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6301" href="#" class="fr-nav__link">Lien de navigation nav-6301</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6305" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6310" href="#" class="fr-nav__link">Lien de navigation nav-6310</a>
</li>
<li>
<a id="nav-6311" href="#" class="fr-nav__link">Lien de navigation nav-6311</a>
</li>
<li>
<a id="nav-6312" href="#" class="fr-nav__link">Lien de navigation nav-6312</a>
</li>
<li>
<a id="nav-6313" href="#" class="fr-nav__link">Lien de navigation nav-6313</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6314" type="link" href="#" class="fr-nav__link">accès direct nav-6314</a>
</li>
<li class="fr-nav__item">
<button id="menu-6315" aria-expanded="false" aria-controls="collapse-6316" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6316">
<ul class="fr-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6321" href="#" class="fr-nav__link">Lien de navigation nav-6321</a>
</li>
<li>
<a id="nav-6322" href="#" class="fr-nav__link">Lien de navigation nav-6322</a>
</li>
<li>
<a id="nav-6323" href="#" class="fr-nav__link">Lien de navigation nav-6323</a>
</li>
<li>
<a id="nav-6324" href="#" class="fr-nav__link">Lien de navigation nav-6324</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6325" aria-expanded="false" aria-controls="collapse-6326" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6326">
<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-6326" title="Fermer" type="button" id="button-6414" 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>Lorem [...] elit ut.</p>
<a id="link-6327" 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-6328" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6333" href="#" class="fr-nav__link">Lien de navigation nav-6333</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6337" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6342" href="#" class="fr-nav__link">Lien de navigation nav-6342</a>
</li>
<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" href="#" class="fr-nav__link">Lien de navigation nav-6345</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6346" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6351" href="#" class="fr-nav__link">Lien de navigation nav-6351</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6355" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6360" href="#" class="fr-nav__link">Lien de navigation nav-6360</a>
</li>
<li>
<a id="nav-6361" href="#" class="fr-nav__link">Lien de navigation nav-6361</a>
</li>
<li>
<a id="nav-6362" href="#" class="fr-nav__link">Lien de navigation nav-6362</a>
</li>
<li>
<a id="nav-6363" href="#" class="fr-nav__link">Lien de navigation nav-6363</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6364" type="link" href="#" class="fr-nav__link">accès direct nav-6364</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6365" aria-expanded="false" aria-controls="collapse-6366" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6366">
<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-6366" title="Fermer" type="button" id="button-6415" 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-6367" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6372" href="#" class="fr-nav__link">Lien de navigation nav-6372</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6376" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6381" href="#" class="fr-nav__link">Lien de navigation nav-6381</a>
</li>
<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" href="#" class="fr-nav__link">Lien de navigation nav-6384</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6385" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6390" href="#" class="fr-nav__link">Lien de navigation nav-6390</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6394" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6399" href="#" class="fr-nav__link">Lien de navigation nav-6399</a>
</li>
<li>
<a id="nav-6400" href="#" class="fr-nav__link">Lien de navigation nav-6400</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6403" aria-expanded="false" aria-controls="collapse-6404" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6404">
<ul class="fr-menu__list">
<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>
<li>
<a id="nav-6409" href="#" class="fr-nav__link">Lien de navigation nav-6409</a>
</li>
<li>
<a id="nav-6410" href="#" class="fr-nav__link">Lien de navigation nav-6410</a>
</li>
<li>
<a id="nav-6411" href="#" class="fr-nav__link">Lien de navigation nav-6411</a>
</li>
<li>
<a id="nav-6412" href="#" class="fr-nav__link">Lien de navigation nav-6412</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>