DSFR v1.14.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-5966" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-5967" aria-expanded="false" aria-controls="collapse-5968" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-5968">
<ul class="fr-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" 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>
</li>
<li class="fr-nav__item">
<button id="mega-menu-5977" aria-expanded="false" aria-controls="collapse-5978" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-5978">
<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-5978" title="Fermer" type="button" id="button-6114" 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-5979" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5988" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-5989" href="#" class="fr-nav__link">Lien de navigation nav-5989</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-5997" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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" aria-current="page" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6006" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-6010" 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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6015" type="link" href="#" class="fr-nav__link">accès direct nav-6015</a>
</li>
<li class="fr-nav__item">
<button id="menu-6016" aria-expanded="false" aria-controls="collapse-6017" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6017">
<ul class="fr-menu__list">
<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" aria-current="page" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6026" aria-expanded="false" aria-controls="collapse-6027" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6027">
<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-6027" title="Fermer" type="button" id="button-6115" 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-6028" 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-6029" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-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>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6038" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6039" href="#" class="fr-nav__link">Lien de navigation nav-6039</a>
</li>
<li>
<a id="nav-6040" href="#" class="fr-nav__link">Lien de navigation nav-6040</a>
</li>
<li>
<a id="nav-6041" href="#" class="fr-nav__link">Lien de navigation nav-6041</a>
</li>
<li>
<a id="nav-6042" href="#" class="fr-nav__link">Lien de navigation nav-6042</a>
</li>
<li>
<a id="nav-6043" href="#" class="fr-nav__link">Lien de navigation nav-6043</a>
</li>
<li>
<a id="nav-6044" href="#" class="fr-nav__link">Lien de navigation nav-6044</a>
</li>
<li>
<a id="nav-6045" href="#" class="fr-nav__link">Lien de navigation nav-6045</a>
</li>
<li>
<a id="nav-6046" href="#" class="fr-nav__link">Lien de navigation nav-6046</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6047" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6048" href="#" class="fr-nav__link">Lien de navigation nav-6048</a>
</li>
<li>
<a id="nav-6049" href="#" class="fr-nav__link">Lien de navigation nav-6049</a>
</li>
<li>
<a id="nav-6050" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6050</a>
</li>
<li>
<a id="nav-6051" href="#" class="fr-nav__link">Lien de navigation nav-6051</a>
</li>
<li>
<a id="nav-6052" href="#" class="fr-nav__link">Lien de navigation nav-6052</a>
</li>
<li>
<a id="nav-6053" href="#" class="fr-nav__link">Lien de navigation nav-6053</a>
</li>
<li>
<a id="nav-6054" href="#" class="fr-nav__link">Lien de navigation nav-6054</a>
</li>
<li>
<a id="nav-6055" href="#" class="fr-nav__link">Lien de navigation nav-6055</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6056" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6057" href="#" class="fr-nav__link">Lien de navigation nav-6057</a>
</li>
<li>
<a id="nav-6058" href="#" class="fr-nav__link">Lien de navigation nav-6058</a>
</li>
<li>
<a id="nav-6059" href="#" class="fr-nav__link">Lien de navigation nav-6059</a>
</li>
<li>
<a id="nav-6060" href="#" class="fr-nav__link">Lien de navigation nav-6060</a>
</li>
<li>
<a id="nav-6061" href="#" class="fr-nav__link">Lien de navigation nav-6061</a>
</li>
<li>
<a id="nav-6062" href="#" class="fr-nav__link">Lien de navigation nav-6062</a>
</li>
<li>
<a id="nav-6063" href="#" class="fr-nav__link">Lien de navigation nav-6063</a>
</li>
<li>
<a id="nav-6064" href="#" class="fr-nav__link">Lien de navigation nav-6064</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-6065" type="link" href="#" class="fr-nav__link">accès direct nav-6065</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-6066" aria-expanded="false" aria-controls="collapse-6067" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6067">
<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-6067" title="Fermer" type="button" id="button-6116" 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-6068" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6069" href="#" class="fr-nav__link">Lien de navigation nav-6069</a>
</li>
<li>
<a id="nav-6070" href="#" class="fr-nav__link">Lien de navigation nav-6070</a>
</li>
<li>
<a id="nav-6071" href="#" class="fr-nav__link">Lien de navigation nav-6071</a>
</li>
<li>
<a id="nav-6072" href="#" class="fr-nav__link">Lien de navigation nav-6072</a>
</li>
<li>
<a id="nav-6073" href="#" class="fr-nav__link">Lien de navigation nav-6073</a>
</li>
<li>
<a id="nav-6074" href="#" class="fr-nav__link">Lien de navigation nav-6074</a>
</li>
<li>
<a id="nav-6075" href="#" class="fr-nav__link">Lien de navigation nav-6075</a>
</li>
<li>
<a id="nav-6076" href="#" class="fr-nav__link">Lien de navigation nav-6076</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6077" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6078" href="#" class="fr-nav__link">Lien de navigation nav-6078</a>
</li>
<li>
<a id="nav-6079" href="#" class="fr-nav__link">Lien de navigation nav-6079</a>
</li>
<li>
<a id="nav-6080" href="#" class="fr-nav__link">Lien de navigation nav-6080</a>
</li>
<li>
<a id="nav-6081" href="#" class="fr-nav__link">Lien de navigation nav-6081</a>
</li>
<li>
<a id="nav-6082" href="#" class="fr-nav__link">Lien de navigation nav-6082</a>
</li>
<li>
<a id="nav-6083" href="#" class="fr-nav__link">Lien de navigation nav-6083</a>
</li>
<li>
<a id="nav-6084" href="#" class="fr-nav__link">Lien de navigation nav-6084</a>
</li>
<li>
<a id="nav-6085" href="#" class="fr-nav__link">Lien de navigation nav-6085</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6086" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6087" href="#" class="fr-nav__link">Lien de navigation nav-6087</a>
</li>
<li>
<a id="nav-6088" href="#" class="fr-nav__link">Lien de navigation nav-6088</a>
</li>
<li>
<a id="nav-6089" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-6089</a>
</li>
<li>
<a id="nav-6090" href="#" class="fr-nav__link">Lien de navigation nav-6090</a>
</li>
<li>
<a id="nav-6091" href="#" class="fr-nav__link">Lien de navigation nav-6091</a>
</li>
<li>
<a id="nav-6092" href="#" class="fr-nav__link">Lien de navigation nav-6092</a>
</li>
<li>
<a id="nav-6093" href="#" class="fr-nav__link">Lien de navigation nav-6093</a>
</li>
<li>
<a id="nav-6094" href="#" class="fr-nav__link">Lien de navigation nav-6094</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-6095" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-6096" href="#" class="fr-nav__link">Lien de navigation nav-6096</a>
</li>
<li>
<a id="nav-6097" href="#" class="fr-nav__link">Lien de navigation nav-6097</a>
</li>
<li>
<a id="nav-6098" href="#" class="fr-nav__link">Lien de navigation nav-6098</a>
</li>
<li>
<a id="nav-6099" href="#" class="fr-nav__link">Lien de navigation nav-6099</a>
</li>
<li>
<a id="nav-6100" href="#" class="fr-nav__link">Lien de navigation nav-6100</a>
</li>
<li>
<a id="nav-6101" href="#" class="fr-nav__link">Lien de navigation nav-6101</a>
</li>
<li>
<a id="nav-6102" href="#" class="fr-nav__link">Lien de navigation nav-6102</a>
</li>
<li>
<a id="nav-6103" href="#" class="fr-nav__link">Lien de navigation nav-6103</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-6104" aria-expanded="false" aria-controls="collapse-6105" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6105">
<ul class="fr-menu__list">
<li>
<a id="nav-6106" href="#" class="fr-nav__link">Lien de navigation nav-6106</a>
</li>
<li>
<a id="nav-6107" href="#" class="fr-nav__link">Lien de navigation nav-6107</a>
</li>
<li>
<a id="nav-6108" href="#" class="fr-nav__link">Lien de navigation nav-6108</a>
</li>
<li>
<a id="nav-6109" href="#" class="fr-nav__link">Lien de navigation nav-6109</a>
</li>
<li>
<a id="nav-6110" href="#" class="fr-nav__link">Lien de navigation nav-6110</a>
</li>
<li>
<a id="nav-6111" href="#" class="fr-nav__link">Lien de navigation nav-6111</a>
</li>
<li>
<a id="nav-6112" href="#" class="fr-nav__link">Lien de navigation nav-6112</a>
</li>
<li>
<a id="nav-6113" href="#" class="fr-nav__link">Lien de navigation nav-6113</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>