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-6442" 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-6444">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6444">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6445">Lien de navigation nav-6445</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6446">Lien de navigation nav-6446</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6447">Lien de navigation nav-6447</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6448">Lien de navigation nav-6448</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6449">Lien de navigation nav-6449</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6450">Lien de navigation nav-6450</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6451">Lien de navigation nav-6451</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6452">Lien de navigation nav-6452</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6454">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6454">
<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-6454" id="button-6590" 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-6455">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6456">Lien de navigation nav-6456</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6457">Lien de navigation nav-6457</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6458">Lien de navigation nav-6458</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6459">Lien de navigation nav-6459</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6460">Lien de navigation nav-6460</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6461">Lien de navigation nav-6461</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6462">Lien de navigation nav-6462</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6463">Lien de navigation nav-6463</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-6464">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6465">Lien de navigation nav-6465</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6466">Lien de navigation nav-6466</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6467">Lien de navigation nav-6467</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6468">Lien de navigation nav-6468</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6469">Lien de navigation nav-6469</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6470">Lien de navigation nav-6470</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6471">Lien de navigation nav-6471</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6472">Lien de navigation nav-6472</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-6473">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6474">Lien de navigation nav-6474</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6475">Lien de navigation nav-6475</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6476" aria-current="page">Lien de navigation nav-6476</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6477">Lien de navigation nav-6477</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6478">Lien de navigation nav-6478</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6479">Lien de navigation nav-6479</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6480">Lien de navigation nav-6480</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6481">Lien de navigation nav-6481</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-6482">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6483">Lien de navigation nav-6483</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6484">Lien de navigation nav-6484</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6485">Lien de navigation nav-6485</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6486">Lien de navigation nav-6486</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6487">Lien de navigation nav-6487</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6488">Lien de navigation nav-6488</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6489">Lien de navigation nav-6489</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6490">Lien de navigation nav-6490</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-6491">accès direct nav-6491</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6493" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6493">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6494">Lien de navigation nav-6494</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6495">Lien de navigation nav-6495</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6496" aria-current="page">Lien de navigation nav-6496</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6497">Lien de navigation nav-6497</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6498">Lien de navigation nav-6498</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6499">Lien de navigation nav-6499</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6500">Lien de navigation nav-6500</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6501">Lien de navigation nav-6501</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6503">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6503">
<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-6503" id="button-6591" 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-6504" 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-6505">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6506">Lien de navigation nav-6506</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6507">Lien de navigation nav-6507</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6508">Lien de navigation nav-6508</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6509">Lien de navigation nav-6509</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6510">Lien de navigation nav-6510</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6511">Lien de navigation nav-6511</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6512">Lien de navigation nav-6512</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6513">Lien de navigation nav-6513</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-6514">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6515">Lien de navigation nav-6515</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6516">Lien de navigation nav-6516</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6517">Lien de navigation nav-6517</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6518">Lien de navigation nav-6518</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6519">Lien de navigation nav-6519</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6520">Lien de navigation nav-6520</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6521">Lien de navigation nav-6521</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6522">Lien de navigation nav-6522</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-6523">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6524">Lien de navigation nav-6524</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6525">Lien de navigation nav-6525</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6526" aria-current="page">Lien de navigation nav-6526</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6527">Lien de navigation nav-6527</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6528">Lien de navigation nav-6528</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6529">Lien de navigation nav-6529</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6530">Lien de navigation nav-6530</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6531">Lien de navigation nav-6531</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-6532">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6533">Lien de navigation nav-6533</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6534">Lien de navigation nav-6534</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6535">Lien de navigation nav-6535</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6536">Lien de navigation nav-6536</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6537">Lien de navigation nav-6537</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6538">Lien de navigation nav-6538</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6539">Lien de navigation nav-6539</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6540">Lien de navigation nav-6540</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-6541">accès direct nav-6541</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6543">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-6543">
<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-6543" id="button-6592" 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-6544">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6545">Lien de navigation nav-6545</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6546">Lien de navigation nav-6546</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6547">Lien de navigation nav-6547</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6548">Lien de navigation nav-6548</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6549">Lien de navigation nav-6549</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6550">Lien de navigation nav-6550</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6551">Lien de navigation nav-6551</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6552">Lien de navigation nav-6552</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-6553">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6554">Lien de navigation nav-6554</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6555">Lien de navigation nav-6555</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6556">Lien de navigation nav-6556</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6557">Lien de navigation nav-6557</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6558">Lien de navigation nav-6558</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6559">Lien de navigation nav-6559</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6560">Lien de navigation nav-6560</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6561">Lien de navigation nav-6561</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-6562">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6563">Lien de navigation nav-6563</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6564">Lien de navigation nav-6564</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6565" aria-current="page">Lien de navigation nav-6565</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6566">Lien de navigation nav-6566</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6567">Lien de navigation nav-6567</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6568">Lien de navigation nav-6568</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6569">Lien de navigation nav-6569</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6570">Lien de navigation nav-6570</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-6571">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6572">Lien de navigation nav-6572</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6573">Lien de navigation nav-6573</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6574">Lien de navigation nav-6574</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6575">Lien de navigation nav-6575</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6576">Lien de navigation nav-6576</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6577">Lien de navigation nav-6577</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6578">Lien de navigation nav-6578</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6579">Lien de navigation nav-6579</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-6581">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-6581">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-6582">Lien de navigation nav-6582</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6583">Lien de navigation nav-6583</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6584">Lien de navigation nav-6584</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6585">Lien de navigation nav-6585</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6586">Lien de navigation nav-6586</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6587">Lien de navigation nav-6587</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6588">Lien de navigation nav-6588</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-6589">Lien de navigation nav-6589</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>