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-489" id="button-490" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-491" aria-haspopup="menu" id="button-492" 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-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-489">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-489" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-488" role="search">
<label class="fr-label" for="search-488-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-488-input" name="search-488-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-491" aria-labelledby="button-492">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-491" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-493" 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-495">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-495">
<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-496">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-496">
<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-496" 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-497" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-497">
<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-498">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-498">
<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-498" 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-499">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-499">
<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-499" 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-500">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-500">
<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 - [À MODIFIER - 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-506" aria-haspopup="menu" id="button-507" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-506" aria-labelledby="button-507">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-506" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-509" 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] - [À 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>
</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-514" aria-haspopup="menu" id="button-515" 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-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-514" aria-labelledby="button-515">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-514" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
Header avec nom de service, lien d’accès
Ministère
de l’europe
et des affaires
étrangères
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">
Ministère
<br>de l’europe
<br>et des affaires
<br>étrangères
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-521" aria-haspopup="menu" id="button-522" 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-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-521" aria-labelledby="button-522">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-521" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-524" 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-535" id="button-536" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-537" aria-haspopup="menu" id="button-538" 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>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-535">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-535" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-534" role="search">
<label class="fr-label" for="search-534-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-534-input" name="search-534-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-537" aria-labelledby="button-538">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-537" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-541" 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]">
<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-552" id="button-553" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-554" aria-haspopup="menu" id="button-555" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-552">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-552" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-551" role="search">
<label class="fr-label" for="search-551-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-551-input" name="search-551-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-554" aria-labelledby="button-555">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-554" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-558" 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-569" id="button-570" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-571" aria-haspopup="menu" id="button-572" 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-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-569">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-569" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-568" role="search">
<label class="fr-label" for="search-568-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-568-input" name="search-568-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-571" aria-labelledby="button-572">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-571" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-575" 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 - [À MODIFIER - 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-579" aria-haspopup="menu" id="button-580" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
</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-579" aria-labelledby="button-580">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-579" 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-591" id="button-592" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-593" aria-haspopup="menu" id="button-594" 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
<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-591">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-591" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-590" role="search">
<label class="fr-label" for="search-590-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-590-input" name="search-590-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-593" aria-labelledby="button-594">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-593" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-597" 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
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__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-608" id="button-609" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-610" aria-haspopup="menu" id="button-611" 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
<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-608">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-608" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-607" role="search">
<label class="fr-label" for="search-607-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-607-input" name="search-607-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-610" aria-labelledby="button-611">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-610" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-614" 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 - [À MODIFIER - 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-620" aria-haspopup="menu" id="button-621" 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-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-623" 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-639" id="button-640" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-641" aria-haspopup="menu" id="button-642" 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-639">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-639">Fermer</button>
<div class="fr-search-bar" id="search-638" role="search">
<label class="fr-label" for="search-638-input">
Rechercher
</label>
<input class="fr-input" placeholder="Rechercher" type="search" id="search-638-input" name="search-638-input">
<button class="fr-btn" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-641" aria-labelledby="button-642">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-641">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-643" 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-645">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-645">
<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-646">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-646">
<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-646" 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-647" aria-current="true">Entrée menu active</button>
<div class="fr-collapse fr-menu" id="menu-647">
<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-648">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-648">
<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-648" 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-649">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="mega-menu-649">
<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-649" 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-650">Entrée menu</button>
<div class="fr-collapse fr-menu" id="menu-650">
<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>