DSFR v1.13.2
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-6307" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-6308" aria-expanded="false" aria-controls="collapse-6309" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6309">
<ul class="fr-menu__list">
<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>
<li>
<a id="nav-6314" href="#" class="fr-nav__link">Lien de navigation nav-6314</a>
</li>
<li>
<a id="nav-6315" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6318" aria-expanded="false" aria-controls="collapse-6319" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6319">
<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-6319" title="Fermer" type="button" id="button-6455" 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-6320" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6329" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6337" href="#" class="fr-nav__link">Lien de navigation nav-6337</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6338" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6346" href="#" class="fr-nav__link">Lien de navigation nav-6346</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6347" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
<li>
<a id="nav-6355" href="#" class="fr-nav__link">Lien de navigation nav-6355</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6356" type="link" href="#" class="fr-nav__link">accès direct nav-6356</a>
</li>
<li class="fr-nav__item">
<button id="menu-6357" aria-expanded="false" aria-controls="collapse-6358" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6358">
<ul class="fr-menu__list">
<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" aria-current="page" 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>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6367" aria-expanded="false" aria-controls="collapse-6368" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6368">
<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-6368" title="Fermer" type="button" id="button-6456" 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-6369" 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-6370" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6379" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6388" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6397" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6406" type="link" href="#" class="fr-nav__link">accès direct nav-6406</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6407" aria-expanded="false" aria-controls="collapse-6408" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6408">
<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-6408" title="Fermer" type="button" id="button-6457" 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-6409" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6413" href="#" class="fr-nav__link">Lien de navigation nav-6413</a>
</li>
<li>
<a id="nav-6414" href="#" class="fr-nav__link">Lien de navigation nav-6414</a>
</li>
<li>
<a id="nav-6415" href="#" class="fr-nav__link">Lien de navigation nav-6415</a>
</li>
<li>
<a id="nav-6416" href="#" class="fr-nav__link">Lien de navigation nav-6416</a>
</li>
<li>
<a id="nav-6417" href="#" class="fr-nav__link">Lien de navigation nav-6417</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6418" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6419" href="#" class="fr-nav__link">Lien de navigation nav-6419</a>
</li>
<li>
<a id="nav-6420" href="#" class="fr-nav__link">Lien de navigation nav-6420</a>
</li>
<li>
<a id="nav-6421" href="#" class="fr-nav__link">Lien de navigation nav-6421</a>
</li>
<li>
<a id="nav-6422" href="#" class="fr-nav__link">Lien de navigation nav-6422</a>
</li>
<li>
<a id="nav-6423" href="#" class="fr-nav__link">Lien de navigation nav-6423</a>
</li>
<li>
<a id="nav-6424" href="#" class="fr-nav__link">Lien de navigation nav-6424</a>
</li>
<li>
<a id="nav-6425" href="#" class="fr-nav__link">Lien de navigation nav-6425</a>
</li>
<li>
<a id="nav-6426" href="#" class="fr-nav__link">Lien de navigation nav-6426</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6427" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6428" href="#" class="fr-nav__link">Lien de navigation nav-6428</a>
</li>
<li>
<a id="nav-6429" href="#" class="fr-nav__link">Lien de navigation nav-6429</a>
</li>
<li>
<a id="nav-6430" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6430</a>
</li>
<li>
<a id="nav-6431" href="#" class="fr-nav__link">Lien de navigation nav-6431</a>
</li>
<li>
<a id="nav-6432" href="#" class="fr-nav__link">Lien de navigation nav-6432</a>
</li>
<li>
<a id="nav-6433" href="#" class="fr-nav__link">Lien de navigation nav-6433</a>
</li>
<li>
<a id="nav-6434" href="#" class="fr-nav__link">Lien de navigation nav-6434</a>
</li>
<li>
<a id="nav-6435" href="#" class="fr-nav__link">Lien de navigation nav-6435</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6436" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6437" href="#" class="fr-nav__link">Lien de navigation nav-6437</a>
</li>
<li>
<a id="nav-6438" href="#" class="fr-nav__link">Lien de navigation nav-6438</a>
</li>
<li>
<a id="nav-6439" href="#" class="fr-nav__link">Lien de navigation nav-6439</a>
</li>
<li>
<a id="nav-6440" href="#" class="fr-nav__link">Lien de navigation nav-6440</a>
</li>
<li>
<a id="nav-6441" href="#" class="fr-nav__link">Lien de navigation nav-6441</a>
</li>
<li>
<a id="nav-6442" href="#" class="fr-nav__link">Lien de navigation nav-6442</a>
</li>
<li>
<a id="nav-6443" href="#" class="fr-nav__link">Lien de navigation nav-6443</a>
</li>
<li>
<a id="nav-6444" href="#" class="fr-nav__link">Lien de navigation nav-6444</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6445" aria-expanded="false" aria-controls="collapse-6446" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6446">
<ul class="fr-menu__list">
<li>
<a id="nav-6447" href="#" class="fr-nav__link">Lien de navigation nav-6447</a>
</li>
<li>
<a id="nav-6448" href="#" class="fr-nav__link">Lien de navigation nav-6448</a>
</li>
<li>
<a id="nav-6449" href="#" class="fr-nav__link">Lien de navigation nav-6449</a>
</li>
<li>
<a id="nav-6450" href="#" class="fr-nav__link">Lien de navigation nav-6450</a>
</li>
<li>
<a id="nav-6451" href="#" class="fr-nav__link">Lien de navigation nav-6451</a>
</li>
<li>
<a id="nav-6452" href="#" class="fr-nav__link">Lien de navigation nav-6452</a>
</li>
<li>
<a id="nav-6453" href="#" class="fr-nav__link">Lien de navigation nav-6453</a>
</li>
<li>
<a id="nav-6454" href="#" class="fr-nav__link">Lien de navigation nav-6454</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>