DSFR v1.14.1
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-5887" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-5888" aria-expanded="false" aria-controls="collapse-5889" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5889">
<ul class="fr-menu__list">
<li>
<a id="nav-5890" href="#" class="fr-nav__link">Lien de navigation nav-5890</a>
</li>
<li>
<a id="nav-5891" href="#" class="fr-nav__link">Lien de navigation nav-5891</a>
</li>
<li>
<a id="nav-5892" href="#" class="fr-nav__link">Lien de navigation nav-5892</a>
</li>
<li>
<a id="nav-5893" href="#" class="fr-nav__link">Lien de navigation nav-5893</a>
</li>
<li>
<a id="nav-5894" href="#" class="fr-nav__link">Lien de navigation nav-5894</a>
</li>
<li>
<a id="nav-5895" href="#" class="fr-nav__link">Lien de navigation nav-5895</a>
</li>
<li>
<a id="nav-5896" href="#" class="fr-nav__link">Lien de navigation nav-5896</a>
</li>
<li>
<a id="nav-5897" href="#" class="fr-nav__link">Lien de navigation nav-5897</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5898" aria-expanded="false" aria-controls="collapse-5899" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5899">
<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-5899" title="Fermer" type="button" id="button-6035" 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-5900" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5901" href="#" class="fr-nav__link">Lien de navigation nav-5901</a>
</li>
<li>
<a id="nav-5902" href="#" class="fr-nav__link">Lien de navigation nav-5902</a>
</li>
<li>
<a id="nav-5903" href="#" class="fr-nav__link">Lien de navigation nav-5903</a>
</li>
<li>
<a id="nav-5904" href="#" class="fr-nav__link">Lien de navigation nav-5904</a>
</li>
<li>
<a id="nav-5905" href="#" class="fr-nav__link">Lien de navigation nav-5905</a>
</li>
<li>
<a id="nav-5906" href="#" class="fr-nav__link">Lien de navigation nav-5906</a>
</li>
<li>
<a id="nav-5907" href="#" class="fr-nav__link">Lien de navigation nav-5907</a>
</li>
<li>
<a id="nav-5908" href="#" class="fr-nav__link">Lien de navigation nav-5908</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5909" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5910" href="#" class="fr-nav__link">Lien de navigation nav-5910</a>
</li>
<li>
<a id="nav-5911" href="#" class="fr-nav__link">Lien de navigation nav-5911</a>
</li>
<li>
<a id="nav-5912" href="#" class="fr-nav__link">Lien de navigation nav-5912</a>
</li>
<li>
<a id="nav-5913" href="#" class="fr-nav__link">Lien de navigation nav-5913</a>
</li>
<li>
<a id="nav-5914" href="#" class="fr-nav__link">Lien de navigation nav-5914</a>
</li>
<li>
<a id="nav-5915" href="#" class="fr-nav__link">Lien de navigation nav-5915</a>
</li>
<li>
<a id="nav-5916" href="#" class="fr-nav__link">Lien de navigation nav-5916</a>
</li>
<li>
<a id="nav-5917" href="#" class="fr-nav__link">Lien de navigation nav-5917</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5918" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5919" href="#" class="fr-nav__link">Lien de navigation nav-5919</a>
</li>
<li>
<a id="nav-5920" href="#" class="fr-nav__link">Lien de navigation nav-5920</a>
</li>
<li>
<a id="nav-5921" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-5921</a>
</li>
<li>
<a id="nav-5922" href="#" class="fr-nav__link">Lien de navigation nav-5922</a>
</li>
<li>
<a id="nav-5923" href="#" class="fr-nav__link">Lien de navigation nav-5923</a>
</li>
<li>
<a id="nav-5924" href="#" class="fr-nav__link">Lien de navigation nav-5924</a>
</li>
<li>
<a id="nav-5925" href="#" class="fr-nav__link">Lien de navigation nav-5925</a>
</li>
<li>
<a id="nav-5926" href="#" class="fr-nav__link">Lien de navigation nav-5926</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5927" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5928" href="#" class="fr-nav__link">Lien de navigation nav-5928</a>
</li>
<li>
<a id="nav-5929" href="#" class="fr-nav__link">Lien de navigation nav-5929</a>
</li>
<li>
<a id="nav-5930" href="#" class="fr-nav__link">Lien de navigation nav-5930</a>
</li>
<li>
<a id="nav-5931" href="#" class="fr-nav__link">Lien de navigation nav-5931</a>
</li>
<li>
<a id="nav-5932" href="#" class="fr-nav__link">Lien de navigation nav-5932</a>
</li>
<li>
<a id="nav-5933" href="#" class="fr-nav__link">Lien de navigation nav-5933</a>
</li>
<li>
<a id="nav-5934" href="#" class="fr-nav__link">Lien de navigation nav-5934</a>
</li>
<li>
<a id="nav-5935" href="#" class="fr-nav__link">Lien de navigation nav-5935</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-5936" type="link" href="#" class="fr-nav__link">accès direct nav-5936</a>
</li>
<li class="fr-nav__item">
<button id="menu-5937" aria-expanded="false" aria-controls="collapse-5938" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5938">
<ul class="fr-menu__list">
<li>
<a id="nav-5939" href="#" class="fr-nav__link">Lien de navigation nav-5939</a>
</li>
<li>
<a id="nav-5940" href="#" class="fr-nav__link">Lien de navigation nav-5940</a>
</li>
<li>
<a id="nav-5941" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-5941</a>
</li>
<li>
<a id="nav-5942" href="#" class="fr-nav__link">Lien de navigation nav-5942</a>
</li>
<li>
<a id="nav-5943" href="#" class="fr-nav__link">Lien de navigation nav-5943</a>
</li>
<li>
<a id="nav-5944" href="#" class="fr-nav__link">Lien de navigation nav-5944</a>
</li>
<li>
<a id="nav-5945" href="#" class="fr-nav__link">Lien de navigation nav-5945</a>
</li>
<li>
<a id="nav-5946" href="#" class="fr-nav__link">Lien de navigation nav-5946</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5947" aria-expanded="false" aria-controls="collapse-5948" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5948">
<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-5948" title="Fermer" type="button" id="button-6036" 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-5949" 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-5950" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5951" href="#" class="fr-nav__link">Lien de navigation nav-5951</a>
</li>
<li>
<a id="nav-5952" href="#" class="fr-nav__link">Lien de navigation nav-5952</a>
</li>
<li>
<a id="nav-5953" href="#" class="fr-nav__link">Lien de navigation nav-5953</a>
</li>
<li>
<a id="nav-5954" href="#" class="fr-nav__link">Lien de navigation nav-5954</a>
</li>
<li>
<a id="nav-5955" href="#" class="fr-nav__link">Lien de navigation nav-5955</a>
</li>
<li>
<a id="nav-5956" href="#" class="fr-nav__link">Lien de navigation nav-5956</a>
</li>
<li>
<a id="nav-5957" href="#" class="fr-nav__link">Lien de navigation nav-5957</a>
</li>
<li>
<a id="nav-5958" href="#" class="fr-nav__link">Lien de navigation nav-5958</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5959" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5960" href="#" class="fr-nav__link">Lien de navigation nav-5960</a>
</li>
<li>
<a id="nav-5961" href="#" class="fr-nav__link">Lien de navigation nav-5961</a>
</li>
<li>
<a id="nav-5962" href="#" class="fr-nav__link">Lien de navigation nav-5962</a>
</li>
<li>
<a id="nav-5963" href="#" class="fr-nav__link">Lien de navigation nav-5963</a>
</li>
<li>
<a id="nav-5964" href="#" class="fr-nav__link">Lien de navigation nav-5964</a>
</li>
<li>
<a id="nav-5965" href="#" class="fr-nav__link">Lien de navigation nav-5965</a>
</li>
<li>
<a id="nav-5966" href="#" class="fr-nav__link">Lien de navigation nav-5966</a>
</li>
<li>
<a id="nav-5967" href="#" class="fr-nav__link">Lien de navigation nav-5967</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5968" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5969" href="#" class="fr-nav__link">Lien de navigation nav-5969</a>
</li>
<li>
<a id="nav-5970" href="#" class="fr-nav__link">Lien de navigation nav-5970</a>
</li>
<li>
<a id="nav-5971" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-5971</a>
</li>
<li>
<a id="nav-5972" href="#" class="fr-nav__link">Lien de navigation nav-5972</a>
</li>
<li>
<a id="nav-5973" href="#" class="fr-nav__link">Lien de navigation nav-5973</a>
</li>
<li>
<a id="nav-5974" href="#" class="fr-nav__link">Lien de navigation nav-5974</a>
</li>
<li>
<a id="nav-5975" href="#" class="fr-nav__link">Lien de navigation nav-5975</a>
</li>
<li>
<a id="nav-5976" href="#" class="fr-nav__link">Lien de navigation nav-5976</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5977" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5978" href="#" class="fr-nav__link">Lien de navigation nav-5978</a>
</li>
<li>
<a id="nav-5979" href="#" class="fr-nav__link">Lien de navigation nav-5979</a>
</li>
<li>
<a id="nav-5980" href="#" class="fr-nav__link">Lien de navigation nav-5980</a>
</li>
<li>
<a id="nav-5981" href="#" class="fr-nav__link">Lien de navigation nav-5981</a>
</li>
<li>
<a id="nav-5982" href="#" class="fr-nav__link">Lien de navigation nav-5982</a>
</li>
<li>
<a id="nav-5983" href="#" class="fr-nav__link">Lien de navigation nav-5983</a>
</li>
<li>
<a id="nav-5984" href="#" class="fr-nav__link">Lien de navigation nav-5984</a>
</li>
<li>
<a id="nav-5985" href="#" class="fr-nav__link">Lien de navigation nav-5985</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-5986" type="link" href="#" class="fr-nav__link">accès direct nav-5986</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5987" aria-expanded="false" aria-controls="collapse-5988" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5988">
<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-5988" title="Fermer" type="button" id="button-6037" 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-5989" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5990" href="#" class="fr-nav__link">Lien de navigation nav-5990</a>
</li>
<li>
<a id="nav-5991" href="#" class="fr-nav__link">Lien de navigation nav-5991</a>
</li>
<li>
<a id="nav-5992" href="#" class="fr-nav__link">Lien de navigation nav-5992</a>
</li>
<li>
<a id="nav-5993" href="#" class="fr-nav__link">Lien de navigation nav-5993</a>
</li>
<li>
<a id="nav-5994" href="#" class="fr-nav__link">Lien de navigation nav-5994</a>
</li>
<li>
<a id="nav-5995" href="#" class="fr-nav__link">Lien de navigation nav-5995</a>
</li>
<li>
<a id="nav-5996" href="#" class="fr-nav__link">Lien de navigation nav-5996</a>
</li>
<li>
<a id="nav-5997" href="#" class="fr-nav__link">Lien de navigation nav-5997</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5998" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5999" href="#" class="fr-nav__link">Lien de navigation nav-5999</a>
</li>
<li>
<a id="nav-6000" href="#" class="fr-nav__link">Lien de navigation nav-6000</a>
</li>
<li>
<a id="nav-6001" href="#" class="fr-nav__link">Lien de navigation nav-6001</a>
</li>
<li>
<a id="nav-6002" href="#" class="fr-nav__link">Lien de navigation nav-6002</a>
</li>
<li>
<a id="nav-6003" href="#" class="fr-nav__link">Lien de navigation nav-6003</a>
</li>
<li>
<a id="nav-6004" href="#" class="fr-nav__link">Lien de navigation nav-6004</a>
</li>
<li>
<a id="nav-6005" href="#" class="fr-nav__link">Lien de navigation nav-6005</a>
</li>
<li>
<a id="nav-6006" href="#" class="fr-nav__link">Lien de navigation nav-6006</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6007" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6008" href="#" class="fr-nav__link">Lien de navigation nav-6008</a>
</li>
<li>
<a id="nav-6009" href="#" class="fr-nav__link">Lien de navigation nav-6009</a>
</li>
<li>
<a id="nav-6010" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6010</a>
</li>
<li>
<a id="nav-6011" href="#" class="fr-nav__link">Lien de navigation nav-6011</a>
</li>
<li>
<a id="nav-6012" href="#" class="fr-nav__link">Lien de navigation nav-6012</a>
</li>
<li>
<a id="nav-6013" href="#" class="fr-nav__link">Lien de navigation nav-6013</a>
</li>
<li>
<a id="nav-6014" href="#" class="fr-nav__link">Lien de navigation nav-6014</a>
</li>
<li>
<a id="nav-6015" href="#" class="fr-nav__link">Lien de navigation nav-6015</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6016" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6017" href="#" class="fr-nav__link">Lien de navigation nav-6017</a>
</li>
<li>
<a id="nav-6018" href="#" class="fr-nav__link">Lien de navigation nav-6018</a>
</li>
<li>
<a id="nav-6019" href="#" class="fr-nav__link">Lien de navigation nav-6019</a>
</li>
<li>
<a id="nav-6020" href="#" class="fr-nav__link">Lien de navigation nav-6020</a>
</li>
<li>
<a id="nav-6021" href="#" class="fr-nav__link">Lien de navigation nav-6021</a>
</li>
<li>
<a id="nav-6022" href="#" class="fr-nav__link">Lien de navigation nav-6022</a>
</li>
<li>
<a id="nav-6023" href="#" class="fr-nav__link">Lien de navigation nav-6023</a>
</li>
<li>
<a id="nav-6024" href="#" class="fr-nav__link">Lien de navigation nav-6024</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6025" aria-expanded="false" aria-controls="collapse-6026" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6026">
<ul class="fr-menu__list">
<li>
<a id="nav-6027" href="#" class="fr-nav__link">Lien de navigation nav-6027</a>
</li>
<li>
<a id="nav-6028" href="#" class="fr-nav__link">Lien de navigation nav-6028</a>
</li>
<li>
<a id="nav-6029" href="#" class="fr-nav__link">Lien de navigation nav-6029</a>
</li>
<li>
<a id="nav-6030" href="#" class="fr-nav__link">Lien de navigation nav-6030</a>
</li>
<li>
<a id="nav-6031" href="#" class="fr-nav__link">Lien de navigation nav-6031</a>
</li>
<li>
<a id="nav-6032" href="#" class="fr-nav__link">Lien de navigation nav-6032</a>
</li>
<li>
<a id="nav-6033" href="#" class="fr-nav__link">Lien de navigation nav-6033</a>
</li>
<li>
<a id="nav-6034" href="#" class="fr-nav__link">Lien de navigation nav-6034</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>