DSFR v1.15.4
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-6331" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-6332" aria-expanded="false" aria-controls="collapse-6333" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6333">
<ul class="fr-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>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6342" aria-expanded="false" aria-controls="collapse-6343" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6343">
<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-6343" title="Fermer" type="button" id="button-6479" 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-6344" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6353" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6362" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6371" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6379" href="#" class="fr-nav__link">Lien de navigation nav-6379</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6380" type="link" href="#" class="fr-nav__link">accès direct nav-6380</a>
</li>
<li class="fr-nav__item">
<button id="menu-6381" aria-expanded="false" aria-controls="collapse-6382" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6382">
<ul class="fr-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6390" href="#" class="fr-nav__link">Lien de navigation nav-6390</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6391" aria-expanded="false" aria-controls="collapse-6392" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6392">
<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-6392" title="Fermer" type="button" id="button-6480" 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-6393" 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-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 class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6403" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6412" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6418" href="#" class="fr-nav__link">Lien de navigation nav-6418</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6421" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6427" href="#" class="fr-nav__link">Lien de navigation nav-6427</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6430" type="link" href="#" class="fr-nav__link">accès direct nav-6430</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6431" aria-expanded="false" aria-controls="collapse-6432" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6432">
<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-6432" title="Fermer" type="button" id="button-6481" 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-6433" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6436" href="#" class="fr-nav__link">Lien de navigation nav-6436</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6442" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6445" href="#" class="fr-nav__link">Lien de navigation nav-6445</a>
</li>
<li>
<a id="nav-6446" href="#" class="fr-nav__link">Lien de navigation nav-6446</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6451" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6454</a>
</li>
<li>
<a id="nav-6455" href="#" class="fr-nav__link">Lien de navigation nav-6455</a>
</li>
<li>
<a id="nav-6456" href="#" class="fr-nav__link">Lien de navigation nav-6456</a>
</li>
<li>
<a id="nav-6457" href="#" class="fr-nav__link">Lien de navigation nav-6457</a>
</li>
<li>
<a id="nav-6458" href="#" class="fr-nav__link">Lien de navigation nav-6458</a>
</li>
<li>
<a id="nav-6459" href="#" class="fr-nav__link">Lien de navigation nav-6459</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6460" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6461" href="#" class="fr-nav__link">Lien de navigation nav-6461</a>
</li>
<li>
<a id="nav-6462" href="#" class="fr-nav__link">Lien de navigation nav-6462</a>
</li>
<li>
<a id="nav-6463" href="#" class="fr-nav__link">Lien de navigation nav-6463</a>
</li>
<li>
<a id="nav-6464" href="#" class="fr-nav__link">Lien de navigation nav-6464</a>
</li>
<li>
<a id="nav-6465" href="#" class="fr-nav__link">Lien de navigation nav-6465</a>
</li>
<li>
<a id="nav-6466" href="#" class="fr-nav__link">Lien de navigation nav-6466</a>
</li>
<li>
<a id="nav-6467" href="#" class="fr-nav__link">Lien de navigation nav-6467</a>
</li>
<li>
<a id="nav-6468" href="#" class="fr-nav__link">Lien de navigation nav-6468</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6469" aria-expanded="false" aria-controls="collapse-6470" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6470">
<ul class="fr-menu__list">
<li>
<a id="nav-6471" href="#" class="fr-nav__link">Lien de navigation nav-6471</a>
</li>
<li>
<a id="nav-6472" href="#" class="fr-nav__link">Lien de navigation nav-6472</a>
</li>
<li>
<a id="nav-6473" href="#" class="fr-nav__link">Lien de navigation nav-6473</a>
</li>
<li>
<a id="nav-6474" href="#" class="fr-nav__link">Lien de navigation nav-6474</a>
</li>
<li>
<a id="nav-6475" href="#" class="fr-nav__link">Lien de navigation nav-6475</a>
</li>
<li>
<a id="nav-6476" href="#" class="fr-nav__link">Lien de navigation nav-6476</a>
</li>
<li>
<a id="nav-6477" href="#" class="fr-nav__link">Lien de navigation nav-6477</a>
</li>
<li>
<a id="nav-6478" href="#" class="fr-nav__link">Lien de navigation nav-6478</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>