Header avec Navigation complète
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-495" id="button-496" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-497" aria-haspopup="menu" id="button-498" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-495">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-495" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-494" role="search">
<label class="fr-label" for="search-494-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-494-input-messages" placeholder="Rechercher" id="search-494-input" type="search">
<div class="fr-messages-group" id="search-494-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-497" aria-labelledby="button-498">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-497" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-499" 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="menu-501">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-501">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-502">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-502">
<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="mega-menu-502" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-503" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-503">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-504">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-504">
<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="mega-menu-504" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-505">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-505">
<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="mega-menu-505" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self" aria-current="true">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-506">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-506">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header minimal
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-512" aria-haspopup="menu" id="button-513" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-512" aria-labelledby="button-513">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-512" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-515" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header sans navigation
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
</div>
</div>
</div>
</header>
Header sans navigation avec raccourcis
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-520" aria-haspopup="menu" id="button-521" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-520" aria-labelledby="button-521">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-520" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
Header avec selecteur de langues
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-534" aria-haspopup="menu" id="button-535" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-533" aria-expanded="false" title="Sélectionner une langue">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-533">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-534" aria-labelledby="button-535">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-534" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-536" 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="menu-537">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-537">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-538">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-538">
<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="mega-menu-538" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-539" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-539">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-540">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-540">
<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="mega-menu-540" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-541">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-541">
<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="mega-menu-541" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self" aria-current="true">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-542">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-542">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec nom de service, lien d’accès
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-548" aria-haspopup="menu" id="button-549" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-548" aria-labelledby="button-549">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-548" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-551" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec nom de service, recherche
Intitulé
officiel
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-562" id="button-563" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-564" aria-haspopup="menu" id="button-565" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-562">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-562" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-561" role="search">
<label class="fr-label" for="search-561-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-561-input-messages" placeholder="Rechercher" id="search-561-input" type="search">
<div class="fr-messages-group" id="search-561-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-564" aria-labelledby="button-565">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-564" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-568" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec opérateur vertical, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.9x16.png)
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<a href="/" title="Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<img class="fr-responsive-img" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-579" id="button-580" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-581" aria-haspopup="menu" id="button-582" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-579">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-579" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-578" role="search">
<label class="fr-label" for="search-578-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-578-input-messages" placeholder="Rechercher" id="search-578-input" type="search">
<div class="fr-messages-group" id="search-578-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-581" aria-labelledby="button-582">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-581" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-585" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec opérateur horizontal, nom de service, lien d’accès, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.16x9.png)
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<img class="fr-responsive-img" style="max-width:9.0625rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-596" id="button-597" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-598" aria-haspopup="menu" id="button-599" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-596">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-596" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-595" role="search">
<label class="fr-label" for="search-595-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-595-input-messages" placeholder="Rechercher" id="search-595-input" type="search">
<div class="fr-messages-group" id="search-595-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-598" aria-labelledby="button-599">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-598" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-602" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec raccourcis dupliqués, pour Angular, React et Vue
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-606" aria-haspopup="menu" id="button-607" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-606" aria-labelledby="button-607">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-606" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<ul class="fr-btns-group">
</ul>
</div>
</div>
</div>
</header>
Header avec bandeau BETA
Intitulé
officiel
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-618" id="button-619" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-620" aria-haspopup="menu" id="button-621" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-618">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-618" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-617" role="search">
<label class="fr-label" for="search-617-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-617-input-messages" placeholder="Rechercher" id="search-617-input" type="search">
<div class="fr-messages-group" id="search-617-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-620" aria-labelledby="button-621">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-620" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-624" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header logo opérateur + bandeau BETA
République
Française
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<img class="fr-responsive-img" style="max-width:9.0625rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-635" id="button-636" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-637" aria-haspopup="menu" id="button-638" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-635">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-635" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-634" role="search">
<label class="fr-label" for="search-634-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-634-input-messages" placeholder="Rechercher" id="search-634-input" type="search">
<div class="fr-messages-group" id="search-634-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-637" aria-labelledby="button-638">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-637" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-641" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header min avec bandeau BETA
BETA
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-647" aria-haspopup="menu" id="button-648" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<p class="fr-header__service-title">
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-647" aria-labelledby="button-648">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-647" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-650" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Dépréciation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Header déprécié
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-666" id="button-667" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-668" aria-haspopup="menu" id="button-669" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
<p class="fr-header__service-title">Nom du site / service</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-links-group">
<li>
<a class="fr-link fr-icon-add-circle-line" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-666">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-666">Fermer</button>
<div class="fr-search-bar" id="search-665" role="search">
<label class="fr-label" for="search-665-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-665-input-messages" placeholder="Rechercher" id="search-665-input" type="search">
<div class="fr-messages-group" id="search-665-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-668" aria-labelledby="button-669">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-668">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-670" 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="menu-672">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-672">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-673">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-673">
<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="mega-menu-673" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-674" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-674">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-675">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-675">
<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="mega-menu-675" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<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" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self">accès direct</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="mega-menu-676">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-676">
<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="mega-menu-676" 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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self" aria-current="true">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" aria-current="page">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</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="#" target="_self">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-677">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-677">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self">Lien de navigation</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>