DSFR v1.14.3
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-5890" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-5891" aria-expanded="false" aria-controls="collapse-5892" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5892">
<ul class="fr-menu__list">
<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>
<li>
<a id="nav-5898" href="#" class="fr-nav__link">Lien de navigation nav-5898</a>
</li>
<li>
<a id="nav-5899" href="#" class="fr-nav__link">Lien de navigation nav-5899</a>
</li>
<li>
<a id="nav-5900" href="#" class="fr-nav__link">Lien de navigation nav-5900</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5901" aria-expanded="false" aria-controls="collapse-5902" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5902">
<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-5902" title="Fermer" type="button" id="button-6038" 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-5903" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5909" href="#" class="fr-nav__link">Lien de navigation nav-5909</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5912" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5918" href="#" class="fr-nav__link">Lien de navigation nav-5918</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5921" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-5927" href="#" class="fr-nav__link">Lien de navigation nav-5927</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5930" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5936" href="#" class="fr-nav__link">Lien de navigation nav-5936</a>
</li>
<li>
<a id="nav-5937" href="#" class="fr-nav__link">Lien de navigation nav-5937</a>
</li>
<li>
<a id="nav-5938" href="#" class="fr-nav__link">Lien de navigation nav-5938</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-5939" type="link" href="#" class="fr-nav__link">accès direct nav-5939</a>
</li>
<li class="fr-nav__item">
<button id="menu-5940" aria-expanded="false" aria-controls="collapse-5941" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5941">
<ul class="fr-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-5947" href="#" class="fr-nav__link">Lien de navigation nav-5947</a>
</li>
<li>
<a id="nav-5948" href="#" class="fr-nav__link">Lien de navigation nav-5948</a>
</li>
<li>
<a id="nav-5949" href="#" class="fr-nav__link">Lien de navigation nav-5949</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5950" aria-expanded="false" aria-controls="collapse-5951" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5951">
<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-5951" title="Fermer" type="button" id="button-6039" 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-5952" 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-5953" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5959" href="#" class="fr-nav__link">Lien de navigation nav-5959</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5962" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5968" href="#" class="fr-nav__link">Lien de navigation nav-5968</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5971" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-5977" href="#" class="fr-nav__link">Lien de navigation nav-5977</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5980" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5986" href="#" class="fr-nav__link">Lien de navigation nav-5986</a>
</li>
<li>
<a id="nav-5987" href="#" class="fr-nav__link">Lien de navigation nav-5987</a>
</li>
<li>
<a id="nav-5988" href="#" class="fr-nav__link">Lien de navigation nav-5988</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-5989" type="link" href="#" class="fr-nav__link">accès direct nav-5989</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5990" aria-expanded="false" aria-controls="collapse-5991" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5991">
<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-5991" title="Fermer" type="button" id="button-6040" 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-5992" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-5998" href="#" class="fr-nav__link">Lien de navigation nav-5998</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6001" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6007" href="#" class="fr-nav__link">Lien de navigation nav-6007</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6010" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
<li>
<a id="nav-6016" href="#" class="fr-nav__link">Lien de navigation nav-6016</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6019" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6025" href="#" class="fr-nav__link">Lien de navigation nav-6025</a>
</li>
<li>
<a id="nav-6026" href="#" class="fr-nav__link">Lien de navigation nav-6026</a>
</li>
<li>
<a id="nav-6027" href="#" class="fr-nav__link">Lien de navigation nav-6027</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6028" aria-expanded="false" aria-controls="collapse-6029" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6029">
<ul class="fr-menu__list">
<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>
<li>
<a id="nav-6035" href="#" class="fr-nav__link">Lien de navigation nav-6035</a>
</li>
<li>
<a id="nav-6036" href="#" class="fr-nav__link">Lien de navigation nav-6036</a>
</li>
<li>
<a id="nav-6037" href="#" class="fr-nav__link">Lien de navigation nav-6037</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>