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-6084" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6086">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6086">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6087">Lien de navigation nav-6087</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6088">Lien de navigation nav-6088</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6089">Lien de navigation nav-6089</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6090">Lien de navigation nav-6090</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6091">Lien de navigation nav-6091</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6092">Lien de navigation nav-6092</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6093">Lien de navigation nav-6093</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6094">Lien de navigation nav-6094</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6096">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6096">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-6096" id="button-6232" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6097">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6098">Lien de navigation nav-6098</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6099">Lien de navigation nav-6099</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6100">Lien de navigation nav-6100</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6101">Lien de navigation nav-6101</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6102">Lien de navigation nav-6102</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6103">Lien de navigation nav-6103</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6104">Lien de navigation nav-6104</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6105">Lien de navigation nav-6105</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6106">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6107">Lien de navigation nav-6107</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6108">Lien de navigation nav-6108</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6109">Lien de navigation nav-6109</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6110">Lien de navigation nav-6110</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6111">Lien de navigation nav-6111</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6112">Lien de navigation nav-6112</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6113">Lien de navigation nav-6113</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6114">Lien de navigation nav-6114</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6115">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6116">Lien de navigation nav-6116</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6117">Lien de navigation nav-6117</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6118" aria-current="page">Lien de navigation nav-6118</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6119">Lien de navigation nav-6119</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6120">Lien de navigation nav-6120</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6121">Lien de navigation nav-6121</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6122">Lien de navigation nav-6122</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6123">Lien de navigation nav-6123</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6124">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6125">Lien de navigation nav-6125</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6126">Lien de navigation nav-6126</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6127">Lien de navigation nav-6127</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6128">Lien de navigation nav-6128</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6129">Lien de navigation nav-6129</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6130">Lien de navigation nav-6130</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6131">Lien de navigation nav-6131</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6132">Lien de navigation nav-6132</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-6133">accès direct nav-6133</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6135" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6135">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6136">Lien de navigation nav-6136</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6137">Lien de navigation nav-6137</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6138" aria-current="page">Lien de navigation nav-6138</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6139">Lien de navigation nav-6139</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6140">Lien de navigation nav-6140</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6141">Lien de navigation nav-6141</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6142">Lien de navigation nav-6142</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6143">Lien de navigation nav-6143</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6145">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6145">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-6145" id="button-6233" title="Fermer">
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 class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-6146" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6147">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6148">Lien de navigation nav-6148</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6149">Lien de navigation nav-6149</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6150">Lien de navigation nav-6150</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6151">Lien de navigation nav-6151</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6152">Lien de navigation nav-6152</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6153">Lien de navigation nav-6153</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6154">Lien de navigation nav-6154</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6155">Lien de navigation nav-6155</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6156">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6157">Lien de navigation nav-6157</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6158">Lien de navigation nav-6158</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6159">Lien de navigation nav-6159</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6160">Lien de navigation nav-6160</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6161">Lien de navigation nav-6161</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6162">Lien de navigation nav-6162</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6163">Lien de navigation nav-6163</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6164">Lien de navigation nav-6164</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6165">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6166">Lien de navigation nav-6166</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6167">Lien de navigation nav-6167</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6168" aria-current="page">Lien de navigation nav-6168</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6169">Lien de navigation nav-6169</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6170">Lien de navigation nav-6170</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6171">Lien de navigation nav-6171</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6172">Lien de navigation nav-6172</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6173">Lien de navigation nav-6173</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6174">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6175">Lien de navigation nav-6175</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6176">Lien de navigation nav-6176</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6177">Lien de navigation nav-6177</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6178">Lien de navigation nav-6178</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6179">Lien de navigation nav-6179</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6180">Lien de navigation nav-6180</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6181">Lien de navigation nav-6181</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6182">Lien de navigation nav-6182</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-6183">accès direct nav-6183</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6185">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6185">
<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 class="fr-btn--close fr-btn" aria-controls="collapse-6185" id="button-6234" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6186">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6187">Lien de navigation nav-6187</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6188">Lien de navigation nav-6188</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6189">Lien de navigation nav-6189</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6190">Lien de navigation nav-6190</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6191">Lien de navigation nav-6191</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6192">Lien de navigation nav-6192</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6193">Lien de navigation nav-6193</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6194">Lien de navigation nav-6194</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6195">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6196">Lien de navigation nav-6196</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6197">Lien de navigation nav-6197</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6198">Lien de navigation nav-6198</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6199">Lien de navigation nav-6199</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6200">Lien de navigation nav-6200</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6201">Lien de navigation nav-6201</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6202">Lien de navigation nav-6202</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6203">Lien de navigation nav-6203</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6204">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6205">Lien de navigation nav-6205</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6206">Lien de navigation nav-6206</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6207" aria-current="page">Lien de navigation nav-6207</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6208">Lien de navigation nav-6208</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6209">Lien de navigation nav-6209</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6210">Lien de navigation nav-6210</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6211">Lien de navigation nav-6211</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6212">Lien de navigation nav-6212</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-6213">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6214">Lien de navigation nav-6214</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6215">Lien de navigation nav-6215</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6216">Lien de navigation nav-6216</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6217">Lien de navigation nav-6217</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6218">Lien de navigation nav-6218</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6219">Lien de navigation nav-6219</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6220">Lien de navigation nav-6220</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6221">Lien de navigation nav-6221</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6223">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6223">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6224">Lien de navigation nav-6224</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6225">Lien de navigation nav-6225</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6226">Lien de navigation nav-6226</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6227">Lien de navigation nav-6227</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6228">Lien de navigation nav-6228</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6229">Lien de navigation nav-6229</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6230">Lien de navigation nav-6230</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6231">Lien de navigation nav-6231</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>