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 data-fr-opened="false" aria-controls="modal-2168" title="Menu" type="button" id="button-2169" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2168" aria-labelledby="button-2169">
<div class="fr-container">
<button aria-controls="modal-2168" title="Fermer" type="button" id="button-2171" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2172" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-2173" type="link" href="#" class="fr-nav__link">accès direct nav-2173</a>
</li>
<li class="fr-nav__item">
<a id="nav-2174" type="link" href="#" class="fr-nav__link">accès direct nav-2174</a>
</li>
<li class="fr-nav__item">
<a id="nav-2175" type="link" href="#" class="fr-nav__link">accès direct nav-2175</a>
</li>
<li class="fr-nav__item">
<a id="nav-2176" type="link" href="#" class="fr-nav__link">accès direct nav-2176</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 un seul raccourci
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 data-fr-opened="false" aria-controls="modal-2182" title="Menu" type="button" id="button-2183" class="fr-btn--menu fr-btn">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">
<a href="[url - à modifier]" class="fr-btn--account fr-btn fr-btn">Espace particulier</a>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2182" aria-labelledby="button-2183">
<div class="fr-container">
<button aria-controls="modal-2182" title="Fermer" type="button" id="button-2184" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
Header sans navigation avec une liste de 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 data-fr-opened="false" aria-controls="modal-2189" title="Menu" type="button" id="button-2190" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2189" aria-labelledby="button-2190">
<div class="fr-container">
<button aria-controls="modal-2189" title="Fermer" type="button" id="button-2191" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
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 data-fr-opened="false" aria-controls="modal-2354" title="Rechercher" type="button" id="button-2355" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-2356" title="Menu" type="button" id="button-2357" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2354" aria-labelledby="button-2355">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-2354" title="Fermer" type="button" id="button-2359" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-2353" role="search">
<label class="fr-label" for="search-2353-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2353-input-messages" placeholder="Rechercher" id="search-2353-input" type="search">
<div class="fr-messages-group" id="search-2353-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-2361" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2356" aria-labelledby="button-2357">
<div class="fr-container">
<button aria-controls="modal-2356" title="Fermer" type="button" id="button-2362" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2358" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-2363" aria-expanded="false" aria-controls="collapse-2364" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2364">
<ul class="fr-menu__list">
<li>
<a id="nav-2365" href="#" class="fr-nav__link">Lien de navigation nav-2365</a>
</li>
<li>
<a id="nav-2366" href="#" class="fr-nav__link">Lien de navigation nav-2366</a>
</li>
<li>
<a id="nav-2367" href="#" class="fr-nav__link">Lien de navigation nav-2367</a>
</li>
<li>
<a id="nav-2368" href="#" class="fr-nav__link">Lien de navigation nav-2368</a>
</li>
<li>
<a id="nav-2369" href="#" class="fr-nav__link">Lien de navigation nav-2369</a>
</li>
<li>
<a id="nav-2370" href="#" class="fr-nav__link">Lien de navigation nav-2370</a>
</li>
<li>
<a id="nav-2371" href="#" class="fr-nav__link">Lien de navigation nav-2371</a>
</li>
<li>
<a id="nav-2372" href="#" class="fr-nav__link">Lien de navigation nav-2372</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2373" aria-expanded="false" aria-controls="collapse-2374" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2374">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2374" title="Fermer" type="button" id="button-2510" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2375" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2376" href="#" class="fr-nav__link">Lien de navigation nav-2376</a>
</li>
<li>
<a id="nav-2377" href="#" class="fr-nav__link">Lien de navigation nav-2377</a>
</li>
<li>
<a id="nav-2378" href="#" class="fr-nav__link">Lien de navigation nav-2378</a>
</li>
<li>
<a id="nav-2379" href="#" class="fr-nav__link">Lien de navigation nav-2379</a>
</li>
<li>
<a id="nav-2380" href="#" class="fr-nav__link">Lien de navigation nav-2380</a>
</li>
<li>
<a id="nav-2381" href="#" class="fr-nav__link">Lien de navigation nav-2381</a>
</li>
<li>
<a id="nav-2382" href="#" class="fr-nav__link">Lien de navigation nav-2382</a>
</li>
<li>
<a id="nav-2383" href="#" class="fr-nav__link">Lien de navigation nav-2383</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2384" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2385" href="#" class="fr-nav__link">Lien de navigation nav-2385</a>
</li>
<li>
<a id="nav-2386" href="#" class="fr-nav__link">Lien de navigation nav-2386</a>
</li>
<li>
<a id="nav-2387" href="#" class="fr-nav__link">Lien de navigation nav-2387</a>
</li>
<li>
<a id="nav-2388" href="#" class="fr-nav__link">Lien de navigation nav-2388</a>
</li>
<li>
<a id="nav-2389" href="#" class="fr-nav__link">Lien de navigation nav-2389</a>
</li>
<li>
<a id="nav-2390" href="#" class="fr-nav__link">Lien de navigation nav-2390</a>
</li>
<li>
<a id="nav-2391" href="#" class="fr-nav__link">Lien de navigation nav-2391</a>
</li>
<li>
<a id="nav-2392" href="#" class="fr-nav__link">Lien de navigation nav-2392</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2393" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2394" href="#" class="fr-nav__link">Lien de navigation nav-2394</a>
</li>
<li>
<a id="nav-2395" href="#" class="fr-nav__link">Lien de navigation nav-2395</a>
</li>
<li>
<a id="nav-2396" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2396</a>
</li>
<li>
<a id="nav-2397" href="#" class="fr-nav__link">Lien de navigation nav-2397</a>
</li>
<li>
<a id="nav-2398" href="#" class="fr-nav__link">Lien de navigation nav-2398</a>
</li>
<li>
<a id="nav-2399" href="#" class="fr-nav__link">Lien de navigation nav-2399</a>
</li>
<li>
<a id="nav-2400" href="#" class="fr-nav__link">Lien de navigation nav-2400</a>
</li>
<li>
<a id="nav-2401" href="#" class="fr-nav__link">Lien de navigation nav-2401</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2402" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2403" href="#" class="fr-nav__link">Lien de navigation nav-2403</a>
</li>
<li>
<a id="nav-2404" href="#" class="fr-nav__link">Lien de navigation nav-2404</a>
</li>
<li>
<a id="nav-2405" href="#" class="fr-nav__link">Lien de navigation nav-2405</a>
</li>
<li>
<a id="nav-2406" href="#" class="fr-nav__link">Lien de navigation nav-2406</a>
</li>
<li>
<a id="nav-2407" href="#" class="fr-nav__link">Lien de navigation nav-2407</a>
</li>
<li>
<a id="nav-2408" href="#" class="fr-nav__link">Lien de navigation nav-2408</a>
</li>
<li>
<a id="nav-2409" href="#" class="fr-nav__link">Lien de navigation nav-2409</a>
</li>
<li>
<a id="nav-2410" href="#" class="fr-nav__link">Lien de navigation nav-2410</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2411" type="link" href="#" class="fr-nav__link">accès direct nav-2411</a>
</li>
<li class="fr-nav__item">
<button id="menu-2412" aria-expanded="false" aria-controls="collapse-2413" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2413">
<ul class="fr-menu__list">
<li>
<a id="nav-2414" href="#" class="fr-nav__link">Lien de navigation nav-2414</a>
</li>
<li>
<a id="nav-2415" href="#" class="fr-nav__link">Lien de navigation nav-2415</a>
</li>
<li>
<a id="nav-2416" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2416</a>
</li>
<li>
<a id="nav-2417" href="#" class="fr-nav__link">Lien de navigation nav-2417</a>
</li>
<li>
<a id="nav-2418" href="#" class="fr-nav__link">Lien de navigation nav-2418</a>
</li>
<li>
<a id="nav-2419" href="#" class="fr-nav__link">Lien de navigation nav-2419</a>
</li>
<li>
<a id="nav-2420" href="#" class="fr-nav__link">Lien de navigation nav-2420</a>
</li>
<li>
<a id="nav-2421" href="#" class="fr-nav__link">Lien de navigation nav-2421</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2422" aria-expanded="false" aria-controls="collapse-2423" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2423">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2423" title="Fermer" type="button" id="button-2511" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-2424" href="[url - à modifier]" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2425" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2426" href="#" class="fr-nav__link">Lien de navigation nav-2426</a>
</li>
<li>
<a id="nav-2427" href="#" class="fr-nav__link">Lien de navigation nav-2427</a>
</li>
<li>
<a id="nav-2428" href="#" class="fr-nav__link">Lien de navigation nav-2428</a>
</li>
<li>
<a id="nav-2429" href="#" class="fr-nav__link">Lien de navigation nav-2429</a>
</li>
<li>
<a id="nav-2430" href="#" class="fr-nav__link">Lien de navigation nav-2430</a>
</li>
<li>
<a id="nav-2431" href="#" class="fr-nav__link">Lien de navigation nav-2431</a>
</li>
<li>
<a id="nav-2432" href="#" class="fr-nav__link">Lien de navigation nav-2432</a>
</li>
<li>
<a id="nav-2433" href="#" class="fr-nav__link">Lien de navigation nav-2433</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2434" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2435" href="#" class="fr-nav__link">Lien de navigation nav-2435</a>
</li>
<li>
<a id="nav-2436" href="#" class="fr-nav__link">Lien de navigation nav-2436</a>
</li>
<li>
<a id="nav-2437" href="#" class="fr-nav__link">Lien de navigation nav-2437</a>
</li>
<li>
<a id="nav-2438" href="#" class="fr-nav__link">Lien de navigation nav-2438</a>
</li>
<li>
<a id="nav-2439" href="#" class="fr-nav__link">Lien de navigation nav-2439</a>
</li>
<li>
<a id="nav-2440" href="#" class="fr-nav__link">Lien de navigation nav-2440</a>
</li>
<li>
<a id="nav-2441" href="#" class="fr-nav__link">Lien de navigation nav-2441</a>
</li>
<li>
<a id="nav-2442" href="#" class="fr-nav__link">Lien de navigation nav-2442</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2443" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2444" href="#" class="fr-nav__link">Lien de navigation nav-2444</a>
</li>
<li>
<a id="nav-2445" href="#" class="fr-nav__link">Lien de navigation nav-2445</a>
</li>
<li>
<a id="nav-2446" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2446</a>
</li>
<li>
<a id="nav-2447" href="#" class="fr-nav__link">Lien de navigation nav-2447</a>
</li>
<li>
<a id="nav-2448" href="#" class="fr-nav__link">Lien de navigation nav-2448</a>
</li>
<li>
<a id="nav-2449" href="#" class="fr-nav__link">Lien de navigation nav-2449</a>
</li>
<li>
<a id="nav-2450" href="#" class="fr-nav__link">Lien de navigation nav-2450</a>
</li>
<li>
<a id="nav-2451" href="#" class="fr-nav__link">Lien de navigation nav-2451</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2452" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2453" href="#" class="fr-nav__link">Lien de navigation nav-2453</a>
</li>
<li>
<a id="nav-2454" href="#" class="fr-nav__link">Lien de navigation nav-2454</a>
</li>
<li>
<a id="nav-2455" href="#" class="fr-nav__link">Lien de navigation nav-2455</a>
</li>
<li>
<a id="nav-2456" href="#" class="fr-nav__link">Lien de navigation nav-2456</a>
</li>
<li>
<a id="nav-2457" href="#" class="fr-nav__link">Lien de navigation nav-2457</a>
</li>
<li>
<a id="nav-2458" href="#" class="fr-nav__link">Lien de navigation nav-2458</a>
</li>
<li>
<a id="nav-2459" href="#" class="fr-nav__link">Lien de navigation nav-2459</a>
</li>
<li>
<a id="nav-2460" href="#" class="fr-nav__link">Lien de navigation nav-2460</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2461" type="link" href="#" class="fr-nav__link">accès direct nav-2461</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2462" aria-expanded="false" aria-controls="collapse-2463" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2463">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2463" title="Fermer" type="button" id="button-2512" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2464" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2465" href="#" class="fr-nav__link">Lien de navigation nav-2465</a>
</li>
<li>
<a id="nav-2466" href="#" class="fr-nav__link">Lien de navigation nav-2466</a>
</li>
<li>
<a id="nav-2467" href="#" class="fr-nav__link">Lien de navigation nav-2467</a>
</li>
<li>
<a id="nav-2468" href="#" class="fr-nav__link">Lien de navigation nav-2468</a>
</li>
<li>
<a id="nav-2469" href="#" class="fr-nav__link">Lien de navigation nav-2469</a>
</li>
<li>
<a id="nav-2470" href="#" class="fr-nav__link">Lien de navigation nav-2470</a>
</li>
<li>
<a id="nav-2471" href="#" class="fr-nav__link">Lien de navigation nav-2471</a>
</li>
<li>
<a id="nav-2472" href="#" class="fr-nav__link">Lien de navigation nav-2472</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2473" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2474" href="#" class="fr-nav__link">Lien de navigation nav-2474</a>
</li>
<li>
<a id="nav-2475" href="#" class="fr-nav__link">Lien de navigation nav-2475</a>
</li>
<li>
<a id="nav-2476" href="#" class="fr-nav__link">Lien de navigation nav-2476</a>
</li>
<li>
<a id="nav-2477" href="#" class="fr-nav__link">Lien de navigation nav-2477</a>
</li>
<li>
<a id="nav-2478" href="#" class="fr-nav__link">Lien de navigation nav-2478</a>
</li>
<li>
<a id="nav-2479" href="#" class="fr-nav__link">Lien de navigation nav-2479</a>
</li>
<li>
<a id="nav-2480" href="#" class="fr-nav__link">Lien de navigation nav-2480</a>
</li>
<li>
<a id="nav-2481" href="#" class="fr-nav__link">Lien de navigation nav-2481</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2482" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2483" href="#" class="fr-nav__link">Lien de navigation nav-2483</a>
</li>
<li>
<a id="nav-2484" href="#" class="fr-nav__link">Lien de navigation nav-2484</a>
</li>
<li>
<a id="nav-2485" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2485</a>
</li>
<li>
<a id="nav-2486" href="#" class="fr-nav__link">Lien de navigation nav-2486</a>
</li>
<li>
<a id="nav-2487" href="#" class="fr-nav__link">Lien de navigation nav-2487</a>
</li>
<li>
<a id="nav-2488" href="#" class="fr-nav__link">Lien de navigation nav-2488</a>
</li>
<li>
<a id="nav-2489" href="#" class="fr-nav__link">Lien de navigation nav-2489</a>
</li>
<li>
<a id="nav-2490" href="#" class="fr-nav__link">Lien de navigation nav-2490</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2491" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2492" href="#" class="fr-nav__link">Lien de navigation nav-2492</a>
</li>
<li>
<a id="nav-2493" href="#" class="fr-nav__link">Lien de navigation nav-2493</a>
</li>
<li>
<a id="nav-2494" href="#" class="fr-nav__link">Lien de navigation nav-2494</a>
</li>
<li>
<a id="nav-2495" href="#" class="fr-nav__link">Lien de navigation nav-2495</a>
</li>
<li>
<a id="nav-2496" href="#" class="fr-nav__link">Lien de navigation nav-2496</a>
</li>
<li>
<a id="nav-2497" href="#" class="fr-nav__link">Lien de navigation nav-2497</a>
</li>
<li>
<a id="nav-2498" href="#" class="fr-nav__link">Lien de navigation nav-2498</a>
</li>
<li>
<a id="nav-2499" href="#" class="fr-nav__link">Lien de navigation nav-2499</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-2500" aria-expanded="false" aria-controls="collapse-2501" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2501">
<ul class="fr-menu__list">
<li>
<a id="nav-2502" href="#" class="fr-nav__link">Lien de navigation nav-2502</a>
</li>
<li>
<a id="nav-2503" href="#" class="fr-nav__link">Lien de navigation nav-2503</a>
</li>
<li>
<a id="nav-2504" href="#" class="fr-nav__link">Lien de navigation nav-2504</a>
</li>
<li>
<a id="nav-2505" href="#" class="fr-nav__link">Lien de navigation nav-2505</a>
</li>
<li>
<a id="nav-2506" href="#" class="fr-nav__link">Lien de navigation nav-2506</a>
</li>
<li>
<a id="nav-2507" href="#" class="fr-nav__link">Lien de navigation nav-2507</a>
</li>
<li>
<a id="nav-2508" href="#" class="fr-nav__link">Lien de navigation nav-2508</a>
</li>
<li>
<a id="nav-2509" href="#" class="fr-nav__link">Lien de navigation nav-2509</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</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 data-fr-opened="false" aria-controls="modal-2677" title="Menu" type="button" id="button-2678" class="fr-btn--menu fr-btn">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">
<nav role="navigation" class="fr-translate fr-nav" id="translate-2680">
<div class="fr-nav__item">
<button aria-controls="translate-2676" aria-expanded="false" type="button" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2676">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" id="language-2681" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="/en/" id="language-2682">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/" id="language-2683">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="/de/" id="language-2684">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="/tr/" id="language-2685">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="/ro/" id="language-2686">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2677" aria-labelledby="button-2678">
<div class="fr-container">
<button aria-controls="modal-2677" title="Fermer" type="button" id="button-2687" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2679" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-2688" aria-expanded="false" aria-controls="collapse-2689" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2689">
<ul class="fr-menu__list">
<li>
<a id="nav-2690" href="#" class="fr-nav__link">Lien de navigation nav-2690</a>
</li>
<li>
<a id="nav-2691" href="#" class="fr-nav__link">Lien de navigation nav-2691</a>
</li>
<li>
<a id="nav-2692" href="#" class="fr-nav__link">Lien de navigation nav-2692</a>
</li>
<li>
<a id="nav-2693" href="#" class="fr-nav__link">Lien de navigation nav-2693</a>
</li>
<li>
<a id="nav-2694" href="#" class="fr-nav__link">Lien de navigation nav-2694</a>
</li>
<li>
<a id="nav-2695" href="#" class="fr-nav__link">Lien de navigation nav-2695</a>
</li>
<li>
<a id="nav-2696" href="#" class="fr-nav__link">Lien de navigation nav-2696</a>
</li>
<li>
<a id="nav-2697" href="#" class="fr-nav__link">Lien de navigation nav-2697</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2698" aria-expanded="false" aria-controls="collapse-2699" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2699">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2699" title="Fermer" type="button" id="button-2835" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2700" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2701" href="#" class="fr-nav__link">Lien de navigation nav-2701</a>
</li>
<li>
<a id="nav-2702" href="#" class="fr-nav__link">Lien de navigation nav-2702</a>
</li>
<li>
<a id="nav-2703" href="#" class="fr-nav__link">Lien de navigation nav-2703</a>
</li>
<li>
<a id="nav-2704" href="#" class="fr-nav__link">Lien de navigation nav-2704</a>
</li>
<li>
<a id="nav-2705" href="#" class="fr-nav__link">Lien de navigation nav-2705</a>
</li>
<li>
<a id="nav-2706" href="#" class="fr-nav__link">Lien de navigation nav-2706</a>
</li>
<li>
<a id="nav-2707" href="#" class="fr-nav__link">Lien de navigation nav-2707</a>
</li>
<li>
<a id="nav-2708" href="#" class="fr-nav__link">Lien de navigation nav-2708</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2709" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2710" href="#" class="fr-nav__link">Lien de navigation nav-2710</a>
</li>
<li>
<a id="nav-2711" href="#" class="fr-nav__link">Lien de navigation nav-2711</a>
</li>
<li>
<a id="nav-2712" href="#" class="fr-nav__link">Lien de navigation nav-2712</a>
</li>
<li>
<a id="nav-2713" href="#" class="fr-nav__link">Lien de navigation nav-2713</a>
</li>
<li>
<a id="nav-2714" href="#" class="fr-nav__link">Lien de navigation nav-2714</a>
</li>
<li>
<a id="nav-2715" href="#" class="fr-nav__link">Lien de navigation nav-2715</a>
</li>
<li>
<a id="nav-2716" href="#" class="fr-nav__link">Lien de navigation nav-2716</a>
</li>
<li>
<a id="nav-2717" href="#" class="fr-nav__link">Lien de navigation nav-2717</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2718" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2719" href="#" class="fr-nav__link">Lien de navigation nav-2719</a>
</li>
<li>
<a id="nav-2720" href="#" class="fr-nav__link">Lien de navigation nav-2720</a>
</li>
<li>
<a id="nav-2721" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2721</a>
</li>
<li>
<a id="nav-2722" href="#" class="fr-nav__link">Lien de navigation nav-2722</a>
</li>
<li>
<a id="nav-2723" href="#" class="fr-nav__link">Lien de navigation nav-2723</a>
</li>
<li>
<a id="nav-2724" href="#" class="fr-nav__link">Lien de navigation nav-2724</a>
</li>
<li>
<a id="nav-2725" href="#" class="fr-nav__link">Lien de navigation nav-2725</a>
</li>
<li>
<a id="nav-2726" href="#" class="fr-nav__link">Lien de navigation nav-2726</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2727" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2728" href="#" class="fr-nav__link">Lien de navigation nav-2728</a>
</li>
<li>
<a id="nav-2729" href="#" class="fr-nav__link">Lien de navigation nav-2729</a>
</li>
<li>
<a id="nav-2730" href="#" class="fr-nav__link">Lien de navigation nav-2730</a>
</li>
<li>
<a id="nav-2731" href="#" class="fr-nav__link">Lien de navigation nav-2731</a>
</li>
<li>
<a id="nav-2732" href="#" class="fr-nav__link">Lien de navigation nav-2732</a>
</li>
<li>
<a id="nav-2733" href="#" class="fr-nav__link">Lien de navigation nav-2733</a>
</li>
<li>
<a id="nav-2734" href="#" class="fr-nav__link">Lien de navigation nav-2734</a>
</li>
<li>
<a id="nav-2735" href="#" class="fr-nav__link">Lien de navigation nav-2735</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2736" type="link" href="#" class="fr-nav__link">accès direct nav-2736</a>
</li>
<li class="fr-nav__item">
<button id="menu-2737" aria-expanded="false" aria-controls="collapse-2738" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2738">
<ul class="fr-menu__list">
<li>
<a id="nav-2739" href="#" class="fr-nav__link">Lien de navigation nav-2739</a>
</li>
<li>
<a id="nav-2740" href="#" class="fr-nav__link">Lien de navigation nav-2740</a>
</li>
<li>
<a id="nav-2741" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2741</a>
</li>
<li>
<a id="nav-2742" href="#" class="fr-nav__link">Lien de navigation nav-2742</a>
</li>
<li>
<a id="nav-2743" href="#" class="fr-nav__link">Lien de navigation nav-2743</a>
</li>
<li>
<a id="nav-2744" href="#" class="fr-nav__link">Lien de navigation nav-2744</a>
</li>
<li>
<a id="nav-2745" href="#" class="fr-nav__link">Lien de navigation nav-2745</a>
</li>
<li>
<a id="nav-2746" href="#" class="fr-nav__link">Lien de navigation nav-2746</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2747" aria-expanded="false" aria-controls="collapse-2748" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2748">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2748" title="Fermer" type="button" id="button-2836" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-2749" href="[url - à modifier]" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2750" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2751" href="#" class="fr-nav__link">Lien de navigation nav-2751</a>
</li>
<li>
<a id="nav-2752" href="#" class="fr-nav__link">Lien de navigation nav-2752</a>
</li>
<li>
<a id="nav-2753" href="#" class="fr-nav__link">Lien de navigation nav-2753</a>
</li>
<li>
<a id="nav-2754" href="#" class="fr-nav__link">Lien de navigation nav-2754</a>
</li>
<li>
<a id="nav-2755" href="#" class="fr-nav__link">Lien de navigation nav-2755</a>
</li>
<li>
<a id="nav-2756" href="#" class="fr-nav__link">Lien de navigation nav-2756</a>
</li>
<li>
<a id="nav-2757" href="#" class="fr-nav__link">Lien de navigation nav-2757</a>
</li>
<li>
<a id="nav-2758" href="#" class="fr-nav__link">Lien de navigation nav-2758</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2759" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2760" href="#" class="fr-nav__link">Lien de navigation nav-2760</a>
</li>
<li>
<a id="nav-2761" href="#" class="fr-nav__link">Lien de navigation nav-2761</a>
</li>
<li>
<a id="nav-2762" href="#" class="fr-nav__link">Lien de navigation nav-2762</a>
</li>
<li>
<a id="nav-2763" href="#" class="fr-nav__link">Lien de navigation nav-2763</a>
</li>
<li>
<a id="nav-2764" href="#" class="fr-nav__link">Lien de navigation nav-2764</a>
</li>
<li>
<a id="nav-2765" href="#" class="fr-nav__link">Lien de navigation nav-2765</a>
</li>
<li>
<a id="nav-2766" href="#" class="fr-nav__link">Lien de navigation nav-2766</a>
</li>
<li>
<a id="nav-2767" href="#" class="fr-nav__link">Lien de navigation nav-2767</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2768" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2769" href="#" class="fr-nav__link">Lien de navigation nav-2769</a>
</li>
<li>
<a id="nav-2770" href="#" class="fr-nav__link">Lien de navigation nav-2770</a>
</li>
<li>
<a id="nav-2771" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2771</a>
</li>
<li>
<a id="nav-2772" href="#" class="fr-nav__link">Lien de navigation nav-2772</a>
</li>
<li>
<a id="nav-2773" href="#" class="fr-nav__link">Lien de navigation nav-2773</a>
</li>
<li>
<a id="nav-2774" href="#" class="fr-nav__link">Lien de navigation nav-2774</a>
</li>
<li>
<a id="nav-2775" href="#" class="fr-nav__link">Lien de navigation nav-2775</a>
</li>
<li>
<a id="nav-2776" href="#" class="fr-nav__link">Lien de navigation nav-2776</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2777" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2778" href="#" class="fr-nav__link">Lien de navigation nav-2778</a>
</li>
<li>
<a id="nav-2779" href="#" class="fr-nav__link">Lien de navigation nav-2779</a>
</li>
<li>
<a id="nav-2780" href="#" class="fr-nav__link">Lien de navigation nav-2780</a>
</li>
<li>
<a id="nav-2781" href="#" class="fr-nav__link">Lien de navigation nav-2781</a>
</li>
<li>
<a id="nav-2782" href="#" class="fr-nav__link">Lien de navigation nav-2782</a>
</li>
<li>
<a id="nav-2783" href="#" class="fr-nav__link">Lien de navigation nav-2783</a>
</li>
<li>
<a id="nav-2784" href="#" class="fr-nav__link">Lien de navigation nav-2784</a>
</li>
<li>
<a id="nav-2785" href="#" class="fr-nav__link">Lien de navigation nav-2785</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2786" type="link" href="#" class="fr-nav__link">accès direct nav-2786</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2787" aria-expanded="false" aria-controls="collapse-2788" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2788">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-2788" title="Fermer" type="button" id="button-2837" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2789" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2790" href="#" class="fr-nav__link">Lien de navigation nav-2790</a>
</li>
<li>
<a id="nav-2791" href="#" class="fr-nav__link">Lien de navigation nav-2791</a>
</li>
<li>
<a id="nav-2792" href="#" class="fr-nav__link">Lien de navigation nav-2792</a>
</li>
<li>
<a id="nav-2793" href="#" class="fr-nav__link">Lien de navigation nav-2793</a>
</li>
<li>
<a id="nav-2794" href="#" class="fr-nav__link">Lien de navigation nav-2794</a>
</li>
<li>
<a id="nav-2795" href="#" class="fr-nav__link">Lien de navigation nav-2795</a>
</li>
<li>
<a id="nav-2796" href="#" class="fr-nav__link">Lien de navigation nav-2796</a>
</li>
<li>
<a id="nav-2797" href="#" class="fr-nav__link">Lien de navigation nav-2797</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2798" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2799" href="#" class="fr-nav__link">Lien de navigation nav-2799</a>
</li>
<li>
<a id="nav-2800" href="#" class="fr-nav__link">Lien de navigation nav-2800</a>
</li>
<li>
<a id="nav-2801" href="#" class="fr-nav__link">Lien de navigation nav-2801</a>
</li>
<li>
<a id="nav-2802" href="#" class="fr-nav__link">Lien de navigation nav-2802</a>
</li>
<li>
<a id="nav-2803" href="#" class="fr-nav__link">Lien de navigation nav-2803</a>
</li>
<li>
<a id="nav-2804" href="#" class="fr-nav__link">Lien de navigation nav-2804</a>
</li>
<li>
<a id="nav-2805" href="#" class="fr-nav__link">Lien de navigation nav-2805</a>
</li>
<li>
<a id="nav-2806" href="#" class="fr-nav__link">Lien de navigation nav-2806</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2807" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2808" href="#" class="fr-nav__link">Lien de navigation nav-2808</a>
</li>
<li>
<a id="nav-2809" href="#" class="fr-nav__link">Lien de navigation nav-2809</a>
</li>
<li>
<a id="nav-2810" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2810</a>
</li>
<li>
<a id="nav-2811" href="#" class="fr-nav__link">Lien de navigation nav-2811</a>
</li>
<li>
<a id="nav-2812" href="#" class="fr-nav__link">Lien de navigation nav-2812</a>
</li>
<li>
<a id="nav-2813" href="#" class="fr-nav__link">Lien de navigation nav-2813</a>
</li>
<li>
<a id="nav-2814" href="#" class="fr-nav__link">Lien de navigation nav-2814</a>
</li>
<li>
<a id="nav-2815" href="#" class="fr-nav__link">Lien de navigation nav-2815</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2816" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2817" href="#" class="fr-nav__link">Lien de navigation nav-2817</a>
</li>
<li>
<a id="nav-2818" href="#" class="fr-nav__link">Lien de navigation nav-2818</a>
</li>
<li>
<a id="nav-2819" href="#" class="fr-nav__link">Lien de navigation nav-2819</a>
</li>
<li>
<a id="nav-2820" href="#" class="fr-nav__link">Lien de navigation nav-2820</a>
</li>
<li>
<a id="nav-2821" href="#" class="fr-nav__link">Lien de navigation nav-2821</a>
</li>
<li>
<a id="nav-2822" href="#" class="fr-nav__link">Lien de navigation nav-2822</a>
</li>
<li>
<a id="nav-2823" href="#" class="fr-nav__link">Lien de navigation nav-2823</a>
</li>
<li>
<a id="nav-2824" href="#" class="fr-nav__link">Lien de navigation nav-2824</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-2825" aria-expanded="false" aria-controls="collapse-2826" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2826">
<ul class="fr-menu__list">
<li>
<a id="nav-2827" href="#" class="fr-nav__link">Lien de navigation nav-2827</a>
</li>
<li>
<a id="nav-2828" href="#" class="fr-nav__link">Lien de navigation nav-2828</a>
</li>
<li>
<a id="nav-2829" href="#" class="fr-nav__link">Lien de navigation nav-2829</a>
</li>
<li>
<a id="nav-2830" href="#" class="fr-nav__link">Lien de navigation nav-2830</a>
</li>
<li>
<a id="nav-2831" href="#" class="fr-nav__link">Lien de navigation nav-2831</a>
</li>
<li>
<a id="nav-2832" href="#" class="fr-nav__link">Lien de navigation nav-2832</a>
</li>
<li>
<a id="nav-2833" href="#" class="fr-nav__link">Lien de navigation nav-2833</a>
</li>
<li>
<a id="nav-2834" href="#" class="fr-nav__link">Lien de navigation nav-2834</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec selecteur de langues et 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 data-fr-opened="false" aria-controls="modal-3002" title="Menu" type="button" id="button-3003" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn fr-btn">Espace recruteur</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3005">
<div class="fr-nav__item">
<button aria-controls="translate-3001" aria-expanded="false" type="button" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3001">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" id="language-3006" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="/en/" id="language-3007">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/" id="language-3008">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="/de/" id="language-3009">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="/tr/" id="language-3010">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="/ro/" id="language-3011">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3002" aria-labelledby="button-3003">
<div class="fr-container">
<button aria-controls="modal-3002" title="Fermer" type="button" id="button-3012" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3004" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-3013" aria-expanded="false" aria-controls="collapse-3014" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3014">
<ul class="fr-menu__list">
<li>
<a id="nav-3015" href="#" class="fr-nav__link">Lien de navigation nav-3015</a>
</li>
<li>
<a id="nav-3016" href="#" class="fr-nav__link">Lien de navigation nav-3016</a>
</li>
<li>
<a id="nav-3017" href="#" class="fr-nav__link">Lien de navigation nav-3017</a>
</li>
<li>
<a id="nav-3018" href="#" class="fr-nav__link">Lien de navigation nav-3018</a>
</li>
<li>
<a id="nav-3019" href="#" class="fr-nav__link">Lien de navigation nav-3019</a>
</li>
<li>
<a id="nav-3020" href="#" class="fr-nav__link">Lien de navigation nav-3020</a>
</li>
<li>
<a id="nav-3021" href="#" class="fr-nav__link">Lien de navigation nav-3021</a>
</li>
<li>
<a id="nav-3022" href="#" class="fr-nav__link">Lien de navigation nav-3022</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3023" aria-expanded="false" aria-controls="collapse-3024" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3024">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3024" title="Fermer" type="button" id="button-3160" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3025" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3026" href="#" class="fr-nav__link">Lien de navigation nav-3026</a>
</li>
<li>
<a id="nav-3027" href="#" class="fr-nav__link">Lien de navigation nav-3027</a>
</li>
<li>
<a id="nav-3028" href="#" class="fr-nav__link">Lien de navigation nav-3028</a>
</li>
<li>
<a id="nav-3029" href="#" class="fr-nav__link">Lien de navigation nav-3029</a>
</li>
<li>
<a id="nav-3030" href="#" class="fr-nav__link">Lien de navigation nav-3030</a>
</li>
<li>
<a id="nav-3031" href="#" class="fr-nav__link">Lien de navigation nav-3031</a>
</li>
<li>
<a id="nav-3032" href="#" class="fr-nav__link">Lien de navigation nav-3032</a>
</li>
<li>
<a id="nav-3033" href="#" class="fr-nav__link">Lien de navigation nav-3033</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3034" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3035" href="#" class="fr-nav__link">Lien de navigation nav-3035</a>
</li>
<li>
<a id="nav-3036" href="#" class="fr-nav__link">Lien de navigation nav-3036</a>
</li>
<li>
<a id="nav-3037" href="#" class="fr-nav__link">Lien de navigation nav-3037</a>
</li>
<li>
<a id="nav-3038" href="#" class="fr-nav__link">Lien de navigation nav-3038</a>
</li>
<li>
<a id="nav-3039" href="#" class="fr-nav__link">Lien de navigation nav-3039</a>
</li>
<li>
<a id="nav-3040" href="#" class="fr-nav__link">Lien de navigation nav-3040</a>
</li>
<li>
<a id="nav-3041" href="#" class="fr-nav__link">Lien de navigation nav-3041</a>
</li>
<li>
<a id="nav-3042" href="#" class="fr-nav__link">Lien de navigation nav-3042</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3043" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3044" href="#" class="fr-nav__link">Lien de navigation nav-3044</a>
</li>
<li>
<a id="nav-3045" href="#" class="fr-nav__link">Lien de navigation nav-3045</a>
</li>
<li>
<a id="nav-3046" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3046</a>
</li>
<li>
<a id="nav-3047" href="#" class="fr-nav__link">Lien de navigation nav-3047</a>
</li>
<li>
<a id="nav-3048" href="#" class="fr-nav__link">Lien de navigation nav-3048</a>
</li>
<li>
<a id="nav-3049" href="#" class="fr-nav__link">Lien de navigation nav-3049</a>
</li>
<li>
<a id="nav-3050" href="#" class="fr-nav__link">Lien de navigation nav-3050</a>
</li>
<li>
<a id="nav-3051" href="#" class="fr-nav__link">Lien de navigation nav-3051</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3052" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3053" href="#" class="fr-nav__link">Lien de navigation nav-3053</a>
</li>
<li>
<a id="nav-3054" href="#" class="fr-nav__link">Lien de navigation nav-3054</a>
</li>
<li>
<a id="nav-3055" href="#" class="fr-nav__link">Lien de navigation nav-3055</a>
</li>
<li>
<a id="nav-3056" href="#" class="fr-nav__link">Lien de navigation nav-3056</a>
</li>
<li>
<a id="nav-3057" href="#" class="fr-nav__link">Lien de navigation nav-3057</a>
</li>
<li>
<a id="nav-3058" href="#" class="fr-nav__link">Lien de navigation nav-3058</a>
</li>
<li>
<a id="nav-3059" href="#" class="fr-nav__link">Lien de navigation nav-3059</a>
</li>
<li>
<a id="nav-3060" href="#" class="fr-nav__link">Lien de navigation nav-3060</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3061" type="link" href="#" class="fr-nav__link">accès direct nav-3061</a>
</li>
<li class="fr-nav__item">
<button id="menu-3062" aria-expanded="false" aria-controls="collapse-3063" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3063">
<ul class="fr-menu__list">
<li>
<a id="nav-3064" href="#" class="fr-nav__link">Lien de navigation nav-3064</a>
</li>
<li>
<a id="nav-3065" href="#" class="fr-nav__link">Lien de navigation nav-3065</a>
</li>
<li>
<a id="nav-3066" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3066</a>
</li>
<li>
<a id="nav-3067" href="#" class="fr-nav__link">Lien de navigation nav-3067</a>
</li>
<li>
<a id="nav-3068" href="#" class="fr-nav__link">Lien de navigation nav-3068</a>
</li>
<li>
<a id="nav-3069" href="#" class="fr-nav__link">Lien de navigation nav-3069</a>
</li>
<li>
<a id="nav-3070" href="#" class="fr-nav__link">Lien de navigation nav-3070</a>
</li>
<li>
<a id="nav-3071" href="#" class="fr-nav__link">Lien de navigation nav-3071</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3072" aria-expanded="false" aria-controls="collapse-3073" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3073">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3073" title="Fermer" type="button" id="button-3161" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-3074" href="[url - à modifier]" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3075" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3076" href="#" class="fr-nav__link">Lien de navigation nav-3076</a>
</li>
<li>
<a id="nav-3077" href="#" class="fr-nav__link">Lien de navigation nav-3077</a>
</li>
<li>
<a id="nav-3078" href="#" class="fr-nav__link">Lien de navigation nav-3078</a>
</li>
<li>
<a id="nav-3079" href="#" class="fr-nav__link">Lien de navigation nav-3079</a>
</li>
<li>
<a id="nav-3080" href="#" class="fr-nav__link">Lien de navigation nav-3080</a>
</li>
<li>
<a id="nav-3081" href="#" class="fr-nav__link">Lien de navigation nav-3081</a>
</li>
<li>
<a id="nav-3082" href="#" class="fr-nav__link">Lien de navigation nav-3082</a>
</li>
<li>
<a id="nav-3083" href="#" class="fr-nav__link">Lien de navigation nav-3083</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3084" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3085" href="#" class="fr-nav__link">Lien de navigation nav-3085</a>
</li>
<li>
<a id="nav-3086" href="#" class="fr-nav__link">Lien de navigation nav-3086</a>
</li>
<li>
<a id="nav-3087" href="#" class="fr-nav__link">Lien de navigation nav-3087</a>
</li>
<li>
<a id="nav-3088" href="#" class="fr-nav__link">Lien de navigation nav-3088</a>
</li>
<li>
<a id="nav-3089" href="#" class="fr-nav__link">Lien de navigation nav-3089</a>
</li>
<li>
<a id="nav-3090" href="#" class="fr-nav__link">Lien de navigation nav-3090</a>
</li>
<li>
<a id="nav-3091" href="#" class="fr-nav__link">Lien de navigation nav-3091</a>
</li>
<li>
<a id="nav-3092" href="#" class="fr-nav__link">Lien de navigation nav-3092</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3093" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3094" href="#" class="fr-nav__link">Lien de navigation nav-3094</a>
</li>
<li>
<a id="nav-3095" href="#" class="fr-nav__link">Lien de navigation nav-3095</a>
</li>
<li>
<a id="nav-3096" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3096</a>
</li>
<li>
<a id="nav-3097" href="#" class="fr-nav__link">Lien de navigation nav-3097</a>
</li>
<li>
<a id="nav-3098" href="#" class="fr-nav__link">Lien de navigation nav-3098</a>
</li>
<li>
<a id="nav-3099" href="#" class="fr-nav__link">Lien de navigation nav-3099</a>
</li>
<li>
<a id="nav-3100" href="#" class="fr-nav__link">Lien de navigation nav-3100</a>
</li>
<li>
<a id="nav-3101" href="#" class="fr-nav__link">Lien de navigation nav-3101</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3102" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3103" href="#" class="fr-nav__link">Lien de navigation nav-3103</a>
</li>
<li>
<a id="nav-3104" href="#" class="fr-nav__link">Lien de navigation nav-3104</a>
</li>
<li>
<a id="nav-3105" href="#" class="fr-nav__link">Lien de navigation nav-3105</a>
</li>
<li>
<a id="nav-3106" href="#" class="fr-nav__link">Lien de navigation nav-3106</a>
</li>
<li>
<a id="nav-3107" href="#" class="fr-nav__link">Lien de navigation nav-3107</a>
</li>
<li>
<a id="nav-3108" href="#" class="fr-nav__link">Lien de navigation nav-3108</a>
</li>
<li>
<a id="nav-3109" href="#" class="fr-nav__link">Lien de navigation nav-3109</a>
</li>
<li>
<a id="nav-3110" href="#" class="fr-nav__link">Lien de navigation nav-3110</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3111" type="link" href="#" class="fr-nav__link">accès direct nav-3111</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3112" aria-expanded="false" aria-controls="collapse-3113" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3113">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3113" title="Fermer" type="button" id="button-3162" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3114" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3115" href="#" class="fr-nav__link">Lien de navigation nav-3115</a>
</li>
<li>
<a id="nav-3116" href="#" class="fr-nav__link">Lien de navigation nav-3116</a>
</li>
<li>
<a id="nav-3117" href="#" class="fr-nav__link">Lien de navigation nav-3117</a>
</li>
<li>
<a id="nav-3118" href="#" class="fr-nav__link">Lien de navigation nav-3118</a>
</li>
<li>
<a id="nav-3119" href="#" class="fr-nav__link">Lien de navigation nav-3119</a>
</li>
<li>
<a id="nav-3120" href="#" class="fr-nav__link">Lien de navigation nav-3120</a>
</li>
<li>
<a id="nav-3121" href="#" class="fr-nav__link">Lien de navigation nav-3121</a>
</li>
<li>
<a id="nav-3122" href="#" class="fr-nav__link">Lien de navigation nav-3122</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3123" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3124" href="#" class="fr-nav__link">Lien de navigation nav-3124</a>
</li>
<li>
<a id="nav-3125" href="#" class="fr-nav__link">Lien de navigation nav-3125</a>
</li>
<li>
<a id="nav-3126" href="#" class="fr-nav__link">Lien de navigation nav-3126</a>
</li>
<li>
<a id="nav-3127" href="#" class="fr-nav__link">Lien de navigation nav-3127</a>
</li>
<li>
<a id="nav-3128" href="#" class="fr-nav__link">Lien de navigation nav-3128</a>
</li>
<li>
<a id="nav-3129" href="#" class="fr-nav__link">Lien de navigation nav-3129</a>
</li>
<li>
<a id="nav-3130" href="#" class="fr-nav__link">Lien de navigation nav-3130</a>
</li>
<li>
<a id="nav-3131" href="#" class="fr-nav__link">Lien de navigation nav-3131</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3132" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3133" href="#" class="fr-nav__link">Lien de navigation nav-3133</a>
</li>
<li>
<a id="nav-3134" href="#" class="fr-nav__link">Lien de navigation nav-3134</a>
</li>
<li>
<a id="nav-3135" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3135</a>
</li>
<li>
<a id="nav-3136" href="#" class="fr-nav__link">Lien de navigation nav-3136</a>
</li>
<li>
<a id="nav-3137" href="#" class="fr-nav__link">Lien de navigation nav-3137</a>
</li>
<li>
<a id="nav-3138" href="#" class="fr-nav__link">Lien de navigation nav-3138</a>
</li>
<li>
<a id="nav-3139" href="#" class="fr-nav__link">Lien de navigation nav-3139</a>
</li>
<li>
<a id="nav-3140" href="#" class="fr-nav__link">Lien de navigation nav-3140</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3141" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3142" href="#" class="fr-nav__link">Lien de navigation nav-3142</a>
</li>
<li>
<a id="nav-3143" href="#" class="fr-nav__link">Lien de navigation nav-3143</a>
</li>
<li>
<a id="nav-3144" href="#" class="fr-nav__link">Lien de navigation nav-3144</a>
</li>
<li>
<a id="nav-3145" href="#" class="fr-nav__link">Lien de navigation nav-3145</a>
</li>
<li>
<a id="nav-3146" href="#" class="fr-nav__link">Lien de navigation nav-3146</a>
</li>
<li>
<a id="nav-3147" href="#" class="fr-nav__link">Lien de navigation nav-3147</a>
</li>
<li>
<a id="nav-3148" href="#" class="fr-nav__link">Lien de navigation nav-3148</a>
</li>
<li>
<a id="nav-3149" href="#" class="fr-nav__link">Lien de navigation nav-3149</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-3150" aria-expanded="false" aria-controls="collapse-3151" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3151">
<ul class="fr-menu__list">
<li>
<a id="nav-3152" href="#" class="fr-nav__link">Lien de navigation nav-3152</a>
</li>
<li>
<a id="nav-3153" href="#" class="fr-nav__link">Lien de navigation nav-3153</a>
</li>
<li>
<a id="nav-3154" href="#" class="fr-nav__link">Lien de navigation nav-3154</a>
</li>
<li>
<a id="nav-3155" href="#" class="fr-nav__link">Lien de navigation nav-3155</a>
</li>
<li>
<a id="nav-3156" href="#" class="fr-nav__link">Lien de navigation nav-3156</a>
</li>
<li>
<a id="nav-3157" href="#" class="fr-nav__link">Lien de navigation nav-3157</a>
</li>
<li>
<a id="nav-3158" href="#" class="fr-nav__link">Lien de navigation nav-3158</a>
</li>
<li>
<a id="nav-3159" href="#" class="fr-nav__link">Lien de navigation nav-3159</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec selecteur de langues et paramètre d'affichage
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 data-fr-opened="false" aria-controls="modal-3327" title="Menu" type="button" id="button-3328" class="fr-btn--menu fr-btn">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">
<button aria-controls="fr-theme-modal" data-fr-opened="false" type="button" class="fr-icon-theme-fill fr-btn--icon-left fr-btn fr-btn">Paramètres d'affichage</button>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3330">
<div class="fr-nav__item">
<button aria-controls="translate-3326" aria-expanded="false" type="button" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3326">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" id="language-3331" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="/en/" id="language-3332">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/" id="language-3333">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="/de/" id="language-3334">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="/tr/" id="language-3335">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="/ro/" id="language-3336">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3327" aria-labelledby="button-3328">
<div class="fr-container">
<button aria-controls="modal-3327" title="Fermer" type="button" id="button-3337" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3329" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-3338" aria-expanded="false" aria-controls="collapse-3339" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3339">
<ul class="fr-menu__list">
<li>
<a id="nav-3340" href="#" class="fr-nav__link">Lien de navigation nav-3340</a>
</li>
<li>
<a id="nav-3341" href="#" class="fr-nav__link">Lien de navigation nav-3341</a>
</li>
<li>
<a id="nav-3342" href="#" class="fr-nav__link">Lien de navigation nav-3342</a>
</li>
<li>
<a id="nav-3343" href="#" class="fr-nav__link">Lien de navigation nav-3343</a>
</li>
<li>
<a id="nav-3344" href="#" class="fr-nav__link">Lien de navigation nav-3344</a>
</li>
<li>
<a id="nav-3345" href="#" class="fr-nav__link">Lien de navigation nav-3345</a>
</li>
<li>
<a id="nav-3346" href="#" class="fr-nav__link">Lien de navigation nav-3346</a>
</li>
<li>
<a id="nav-3347" href="#" class="fr-nav__link">Lien de navigation nav-3347</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3348" aria-expanded="false" aria-controls="collapse-3349" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3349">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3349" title="Fermer" type="button" id="button-3485" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3350" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3351" href="#" class="fr-nav__link">Lien de navigation nav-3351</a>
</li>
<li>
<a id="nav-3352" href="#" class="fr-nav__link">Lien de navigation nav-3352</a>
</li>
<li>
<a id="nav-3353" href="#" class="fr-nav__link">Lien de navigation nav-3353</a>
</li>
<li>
<a id="nav-3354" href="#" class="fr-nav__link">Lien de navigation nav-3354</a>
</li>
<li>
<a id="nav-3355" href="#" class="fr-nav__link">Lien de navigation nav-3355</a>
</li>
<li>
<a id="nav-3356" href="#" class="fr-nav__link">Lien de navigation nav-3356</a>
</li>
<li>
<a id="nav-3357" href="#" class="fr-nav__link">Lien de navigation nav-3357</a>
</li>
<li>
<a id="nav-3358" href="#" class="fr-nav__link">Lien de navigation nav-3358</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3359" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3360" href="#" class="fr-nav__link">Lien de navigation nav-3360</a>
</li>
<li>
<a id="nav-3361" href="#" class="fr-nav__link">Lien de navigation nav-3361</a>
</li>
<li>
<a id="nav-3362" href="#" class="fr-nav__link">Lien de navigation nav-3362</a>
</li>
<li>
<a id="nav-3363" href="#" class="fr-nav__link">Lien de navigation nav-3363</a>
</li>
<li>
<a id="nav-3364" href="#" class="fr-nav__link">Lien de navigation nav-3364</a>
</li>
<li>
<a id="nav-3365" href="#" class="fr-nav__link">Lien de navigation nav-3365</a>
</li>
<li>
<a id="nav-3366" href="#" class="fr-nav__link">Lien de navigation nav-3366</a>
</li>
<li>
<a id="nav-3367" href="#" class="fr-nav__link">Lien de navigation nav-3367</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3368" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3369" href="#" class="fr-nav__link">Lien de navigation nav-3369</a>
</li>
<li>
<a id="nav-3370" href="#" class="fr-nav__link">Lien de navigation nav-3370</a>
</li>
<li>
<a id="nav-3371" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3371</a>
</li>
<li>
<a id="nav-3372" href="#" class="fr-nav__link">Lien de navigation nav-3372</a>
</li>
<li>
<a id="nav-3373" href="#" class="fr-nav__link">Lien de navigation nav-3373</a>
</li>
<li>
<a id="nav-3374" href="#" class="fr-nav__link">Lien de navigation nav-3374</a>
</li>
<li>
<a id="nav-3375" href="#" class="fr-nav__link">Lien de navigation nav-3375</a>
</li>
<li>
<a id="nav-3376" href="#" class="fr-nav__link">Lien de navigation nav-3376</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3377" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3378" href="#" class="fr-nav__link">Lien de navigation nav-3378</a>
</li>
<li>
<a id="nav-3379" href="#" class="fr-nav__link">Lien de navigation nav-3379</a>
</li>
<li>
<a id="nav-3380" href="#" class="fr-nav__link">Lien de navigation nav-3380</a>
</li>
<li>
<a id="nav-3381" href="#" class="fr-nav__link">Lien de navigation nav-3381</a>
</li>
<li>
<a id="nav-3382" href="#" class="fr-nav__link">Lien de navigation nav-3382</a>
</li>
<li>
<a id="nav-3383" href="#" class="fr-nav__link">Lien de navigation nav-3383</a>
</li>
<li>
<a id="nav-3384" href="#" class="fr-nav__link">Lien de navigation nav-3384</a>
</li>
<li>
<a id="nav-3385" href="#" class="fr-nav__link">Lien de navigation nav-3385</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3386" type="link" href="#" class="fr-nav__link">accès direct nav-3386</a>
</li>
<li class="fr-nav__item">
<button id="menu-3387" aria-expanded="false" aria-controls="collapse-3388" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3388">
<ul class="fr-menu__list">
<li>
<a id="nav-3389" href="#" class="fr-nav__link">Lien de navigation nav-3389</a>
</li>
<li>
<a id="nav-3390" href="#" class="fr-nav__link">Lien de navigation nav-3390</a>
</li>
<li>
<a id="nav-3391" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3391</a>
</li>
<li>
<a id="nav-3392" href="#" class="fr-nav__link">Lien de navigation nav-3392</a>
</li>
<li>
<a id="nav-3393" href="#" class="fr-nav__link">Lien de navigation nav-3393</a>
</li>
<li>
<a id="nav-3394" href="#" class="fr-nav__link">Lien de navigation nav-3394</a>
</li>
<li>
<a id="nav-3395" href="#" class="fr-nav__link">Lien de navigation nav-3395</a>
</li>
<li>
<a id="nav-3396" href="#" class="fr-nav__link">Lien de navigation nav-3396</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3397" aria-expanded="false" aria-controls="collapse-3398" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3398">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3398" title="Fermer" type="button" id="button-3486" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-3399" href="[url - à modifier]" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3400" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3401" href="#" class="fr-nav__link">Lien de navigation nav-3401</a>
</li>
<li>
<a id="nav-3402" href="#" class="fr-nav__link">Lien de navigation nav-3402</a>
</li>
<li>
<a id="nav-3403" href="#" class="fr-nav__link">Lien de navigation nav-3403</a>
</li>
<li>
<a id="nav-3404" href="#" class="fr-nav__link">Lien de navigation nav-3404</a>
</li>
<li>
<a id="nav-3405" href="#" class="fr-nav__link">Lien de navigation nav-3405</a>
</li>
<li>
<a id="nav-3406" href="#" class="fr-nav__link">Lien de navigation nav-3406</a>
</li>
<li>
<a id="nav-3407" href="#" class="fr-nav__link">Lien de navigation nav-3407</a>
</li>
<li>
<a id="nav-3408" href="#" class="fr-nav__link">Lien de navigation nav-3408</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3409" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3410" href="#" class="fr-nav__link">Lien de navigation nav-3410</a>
</li>
<li>
<a id="nav-3411" href="#" class="fr-nav__link">Lien de navigation nav-3411</a>
</li>
<li>
<a id="nav-3412" href="#" class="fr-nav__link">Lien de navigation nav-3412</a>
</li>
<li>
<a id="nav-3413" href="#" class="fr-nav__link">Lien de navigation nav-3413</a>
</li>
<li>
<a id="nav-3414" href="#" class="fr-nav__link">Lien de navigation nav-3414</a>
</li>
<li>
<a id="nav-3415" href="#" class="fr-nav__link">Lien de navigation nav-3415</a>
</li>
<li>
<a id="nav-3416" href="#" class="fr-nav__link">Lien de navigation nav-3416</a>
</li>
<li>
<a id="nav-3417" href="#" class="fr-nav__link">Lien de navigation nav-3417</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3418" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3419" href="#" class="fr-nav__link">Lien de navigation nav-3419</a>
</li>
<li>
<a id="nav-3420" href="#" class="fr-nav__link">Lien de navigation nav-3420</a>
</li>
<li>
<a id="nav-3421" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3421</a>
</li>
<li>
<a id="nav-3422" href="#" class="fr-nav__link">Lien de navigation nav-3422</a>
</li>
<li>
<a id="nav-3423" href="#" class="fr-nav__link">Lien de navigation nav-3423</a>
</li>
<li>
<a id="nav-3424" href="#" class="fr-nav__link">Lien de navigation nav-3424</a>
</li>
<li>
<a id="nav-3425" href="#" class="fr-nav__link">Lien de navigation nav-3425</a>
</li>
<li>
<a id="nav-3426" href="#" class="fr-nav__link">Lien de navigation nav-3426</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3427" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3428" href="#" class="fr-nav__link">Lien de navigation nav-3428</a>
</li>
<li>
<a id="nav-3429" href="#" class="fr-nav__link">Lien de navigation nav-3429</a>
</li>
<li>
<a id="nav-3430" href="#" class="fr-nav__link">Lien de navigation nav-3430</a>
</li>
<li>
<a id="nav-3431" href="#" class="fr-nav__link">Lien de navigation nav-3431</a>
</li>
<li>
<a id="nav-3432" href="#" class="fr-nav__link">Lien de navigation nav-3432</a>
</li>
<li>
<a id="nav-3433" href="#" class="fr-nav__link">Lien de navigation nav-3433</a>
</li>
<li>
<a id="nav-3434" href="#" class="fr-nav__link">Lien de navigation nav-3434</a>
</li>
<li>
<a id="nav-3435" href="#" class="fr-nav__link">Lien de navigation nav-3435</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3436" type="link" href="#" class="fr-nav__link">accès direct nav-3436</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3437" aria-expanded="false" aria-controls="collapse-3438" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3438">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3438" title="Fermer" type="button" id="button-3487" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3439" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3440" href="#" class="fr-nav__link">Lien de navigation nav-3440</a>
</li>
<li>
<a id="nav-3441" href="#" class="fr-nav__link">Lien de navigation nav-3441</a>
</li>
<li>
<a id="nav-3442" href="#" class="fr-nav__link">Lien de navigation nav-3442</a>
</li>
<li>
<a id="nav-3443" href="#" class="fr-nav__link">Lien de navigation nav-3443</a>
</li>
<li>
<a id="nav-3444" href="#" class="fr-nav__link">Lien de navigation nav-3444</a>
</li>
<li>
<a id="nav-3445" href="#" class="fr-nav__link">Lien de navigation nav-3445</a>
</li>
<li>
<a id="nav-3446" href="#" class="fr-nav__link">Lien de navigation nav-3446</a>
</li>
<li>
<a id="nav-3447" href="#" class="fr-nav__link">Lien de navigation nav-3447</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3448" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3449" href="#" class="fr-nav__link">Lien de navigation nav-3449</a>
</li>
<li>
<a id="nav-3450" href="#" class="fr-nav__link">Lien de navigation nav-3450</a>
</li>
<li>
<a id="nav-3451" href="#" class="fr-nav__link">Lien de navigation nav-3451</a>
</li>
<li>
<a id="nav-3452" href="#" class="fr-nav__link">Lien de navigation nav-3452</a>
</li>
<li>
<a id="nav-3453" href="#" class="fr-nav__link">Lien de navigation nav-3453</a>
</li>
<li>
<a id="nav-3454" href="#" class="fr-nav__link">Lien de navigation nav-3454</a>
</li>
<li>
<a id="nav-3455" href="#" class="fr-nav__link">Lien de navigation nav-3455</a>
</li>
<li>
<a id="nav-3456" href="#" class="fr-nav__link">Lien de navigation nav-3456</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3457" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3458" href="#" class="fr-nav__link">Lien de navigation nav-3458</a>
</li>
<li>
<a id="nav-3459" href="#" class="fr-nav__link">Lien de navigation nav-3459</a>
</li>
<li>
<a id="nav-3460" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3460</a>
</li>
<li>
<a id="nav-3461" href="#" class="fr-nav__link">Lien de navigation nav-3461</a>
</li>
<li>
<a id="nav-3462" href="#" class="fr-nav__link">Lien de navigation nav-3462</a>
</li>
<li>
<a id="nav-3463" href="#" class="fr-nav__link">Lien de navigation nav-3463</a>
</li>
<li>
<a id="nav-3464" href="#" class="fr-nav__link">Lien de navigation nav-3464</a>
</li>
<li>
<a id="nav-3465" href="#" class="fr-nav__link">Lien de navigation nav-3465</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3466" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3467" href="#" class="fr-nav__link">Lien de navigation nav-3467</a>
</li>
<li>
<a id="nav-3468" href="#" class="fr-nav__link">Lien de navigation nav-3468</a>
</li>
<li>
<a id="nav-3469" href="#" class="fr-nav__link">Lien de navigation nav-3469</a>
</li>
<li>
<a id="nav-3470" href="#" class="fr-nav__link">Lien de navigation nav-3470</a>
</li>
<li>
<a id="nav-3471" href="#" class="fr-nav__link">Lien de navigation nav-3471</a>
</li>
<li>
<a id="nav-3472" href="#" class="fr-nav__link">Lien de navigation nav-3472</a>
</li>
<li>
<a id="nav-3473" href="#" class="fr-nav__link">Lien de navigation nav-3473</a>
</li>
<li>
<a id="nav-3474" href="#" class="fr-nav__link">Lien de navigation nav-3474</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-3475" aria-expanded="false" aria-controls="collapse-3476" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3476">
<ul class="fr-menu__list">
<li>
<a id="nav-3477" href="#" class="fr-nav__link">Lien de navigation nav-3477</a>
</li>
<li>
<a id="nav-3478" href="#" class="fr-nav__link">Lien de navigation nav-3478</a>
</li>
<li>
<a id="nav-3479" href="#" class="fr-nav__link">Lien de navigation nav-3479</a>
</li>
<li>
<a id="nav-3480" href="#" class="fr-nav__link">Lien de navigation nav-3480</a>
</li>
<li>
<a id="nav-3481" href="#" class="fr-nav__link">Lien de navigation nav-3481</a>
</li>
<li>
<a id="nav-3482" href="#" class="fr-nav__link">Lien de navigation nav-3482</a>
</li>
<li>
<a id="nav-3483" href="#" class="fr-nav__link">Lien de navigation nav-3483</a>
</li>
<li>
<a id="nav-3484" href="#" class="fr-nav__link">Lien de navigation nav-3484</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 data-fr-opened="false" aria-controls="modal-3498" title="Menu" type="button" id="button-3499" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3498" aria-labelledby="button-3499">
<div class="fr-container">
<button aria-controls="modal-3498" title="Fermer" type="button" id="button-3501" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3502" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3503" type="link" href="#" class="fr-nav__link">accès direct nav-3503</a>
</li>
<li class="fr-nav__item">
<a id="nav-3504" type="link" href="#" class="fr-nav__link">accès direct nav-3504</a>
</li>
<li class="fr-nav__item">
<a id="nav-3505" type="link" href="#" class="fr-nav__link">accès direct nav-3505</a>
</li>
<li class="fr-nav__item">
<a id="nav-3506" type="link" href="#" class="fr-nav__link">accès direct nav-3506</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 data-fr-opened="false" aria-controls="modal-3524" title="Rechercher" type="button" id="button-3525" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3526" title="Menu" type="button" id="button-3527" class="fr-btn--menu fr-btn">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-3524" aria-labelledby="button-3525">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3524" title="Fermer" type="button" id="button-3529" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3523" role="search">
<label class="fr-label" for="search-3523-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3523-input-messages" placeholder="Rechercher" id="search-3523-input" type="search">
<div class="fr-messages-group" id="search-3523-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3531" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3526" aria-labelledby="button-3527">
<div class="fr-container">
<button aria-controls="modal-3526" title="Fermer" type="button" id="button-3532" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3533" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3534" type="link" href="#" class="fr-nav__link">accès direct nav-3534</a>
</li>
<li class="fr-nav__item">
<a id="nav-3535" type="link" href="#" class="fr-nav__link">accès direct nav-3535</a>
</li>
<li class="fr-nav__item">
<a id="nav-3536" type="link" href="#" class="fr-nav__link">accès direct nav-3536</a>
</li>
<li class="fr-nav__item">
<a id="nav-3537" type="link" href="#" class="fr-nav__link">accès direct nav-3537</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec logo opérateur vertical, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.3x4.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="max-width:3.5rem;" src="../../../example/img/placeholder.3x4.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 data-fr-opened="false" aria-controls="modal-3555" title="Rechercher" type="button" id="button-3556" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3557" title="Menu" type="button" id="button-3558" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-3555" aria-labelledby="button-3556">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3555" title="Fermer" type="button" id="button-3560" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3554" role="search">
<label class="fr-label" for="search-3554-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3554-input-messages" placeholder="Rechercher" id="search-3554-input" type="search">
<div class="fr-messages-group" id="search-3554-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3562" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3557" aria-labelledby="button-3558">
<div class="fr-container">
<button aria-controls="modal-3557" title="Fermer" type="button" id="button-3563" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3564" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3565" type="link" href="#" class="fr-nav__link">accès direct nav-3565</a>
</li>
<li class="fr-nav__item">
<a id="nav-3566" type="link" href="#" class="fr-nav__link">accès direct nav-3566</a>
</li>
<li class="fr-nav__item">
<a id="nav-3567" type="link" href="#" class="fr-nav__link">accès direct nav-3567</a>
</li>
<li class="fr-nav__item">
<a id="nav-3568" type="link" href="#" class="fr-nav__link">accès direct nav-3568</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec logo 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:8rem;" 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 data-fr-opened="false" aria-controls="modal-3586" title="Rechercher" type="button" id="button-3587" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3588" title="Menu" type="button" id="button-3589" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3586" aria-labelledby="button-3587">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3586" title="Fermer" type="button" id="button-3591" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3585" role="search">
<label class="fr-label" for="search-3585-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3585-input-messages" placeholder="Rechercher" id="search-3585-input" type="search">
<div class="fr-messages-group" id="search-3585-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3593" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3588" aria-labelledby="button-3589">
<div class="fr-container">
<button aria-controls="modal-3588" title="Fermer" type="button" id="button-3594" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3595" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3596" type="link" href="#" class="fr-nav__link">accès direct nav-3596</a>
</li>
<li class="fr-nav__item">
<a id="nav-3597" type="link" href="#" class="fr-nav__link">accès direct nav-3597</a>
</li>
<li class="fr-nav__item">
<a id="nav-3598" type="link" href="#" class="fr-nav__link">accès direct nav-3598</a>
</li>
<li class="fr-nav__item">
<a id="nav-3599" type="link" href="#" class="fr-nav__link">accès direct nav-3599</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 data-fr-opened="false" aria-controls="modal-3604" title="Menu" type="button" id="button-3605" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3604" aria-labelledby="button-3605">
<div class="fr-container">
<button aria-controls="modal-3604" title="Fermer" type="button" id="button-3606" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
<ul class="fr-btns-group">
<li>
<a href="[url - à modifier]" class="fr-btn--team fr-btn fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn fr-btn">Espace particulier</a>
</li>
</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 data-fr-opened="false" aria-controls="modal-3624" title="Rechercher" type="button" id="button-3625" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3626" title="Menu" type="button" id="button-3627" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3624" aria-labelledby="button-3625">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3624" title="Fermer" type="button" id="button-3629" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3623" role="search">
<label class="fr-label" for="search-3623-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3623-input-messages" placeholder="Rechercher" id="search-3623-input" type="search">
<div class="fr-messages-group" id="search-3623-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3631" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3626" aria-labelledby="button-3627">
<div class="fr-container">
<button aria-controls="modal-3626" title="Fermer" type="button" id="button-3632" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3633" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3634" type="link" href="#" class="fr-nav__link">accès direct nav-3634</a>
</li>
<li class="fr-nav__item">
<a id="nav-3635" type="link" href="#" class="fr-nav__link">accès direct nav-3635</a>
</li>
<li class="fr-nav__item">
<a id="nav-3636" type="link" href="#" class="fr-nav__link">accès direct nav-3636</a>
</li>
<li class="fr-nav__item">
<a id="nav-3637" type="link" href="#" class="fr-nav__link">accès direct nav-3637</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:8rem;" 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 data-fr-opened="false" aria-controls="modal-3655" title="Rechercher" type="button" id="button-3656" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3657" title="Menu" type="button" id="button-3658" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
</li>
<li>
<a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3655" aria-labelledby="button-3656">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3655" title="Fermer" type="button" id="button-3660" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3654" role="search">
<label class="fr-label" for="search-3654-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3654-input-messages" placeholder="Rechercher" id="search-3654-input" type="search">
<div class="fr-messages-group" id="search-3654-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3662" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3657" aria-labelledby="button-3658">
<div class="fr-container">
<button aria-controls="modal-3657" title="Fermer" type="button" id="button-3663" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3664" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3665" type="link" href="#" class="fr-nav__link">accès direct nav-3665</a>
</li>
<li class="fr-nav__item">
<a id="nav-3666" type="link" href="#" class="fr-nav__link">accès direct nav-3666</a>
</li>
<li class="fr-nav__item">
<a id="nav-3667" type="link" href="#" class="fr-nav__link">accès direct nav-3667</a>
</li>
<li class="fr-nav__item">
<a id="nav-3668" type="link" href="#" class="fr-nav__link">accès direct nav-3668</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 data-fr-opened="false" aria-controls="modal-3679" title="Menu" type="button" id="button-3680" class="fr-btn--menu fr-btn">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-3679" aria-labelledby="button-3680">
<div class="fr-container">
<button aria-controls="modal-3679" title="Fermer" type="button" id="button-3682" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3683" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3684" type="link" href="#" class="fr-nav__link">accès direct nav-3684</a>
</li>
<li class="fr-nav__item">
<a id="nav-3685" type="link" href="#" class="fr-nav__link">accès direct nav-3685</a>
</li>
<li class="fr-nav__item">
<a id="nav-3686" type="link" href="#" class="fr-nav__link">accès direct nav-3686</a>
</li>
<li class="fr-nav__item">
<a id="nav-3687" type="link" href="#" class="fr-nav__link">accès direct nav-3687</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 data-fr-opened="false" aria-controls="modal-3851" title="Rechercher" type="button" id="button-3852" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3853" title="Menu" type="button" id="button-3854" class="fr-btn--menu fr-btn">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 id="link-3856" href="[url - à modifier]" class="fr-link fr-icon-add-circle-line">Créer un espace</a>
</li>
<li>
<a id="link-3857" href="[url - à modifier]" class="fr-link fr-icon-lock-line">Se connecter</a>
</li>
<li>
<a id="link-3858" href="[url - à modifier]" class="fr-link fr-icon-account-line">S’enregistrer</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3851" aria-labelledby="button-3852">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-3851">Fermer</button>
<div class="fr-search-bar" id="search-3850" role="search">
<label class="fr-label" for="search-3850-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3850-input-messages" placeholder="Rechercher" id="search-3850-input" type="search">
<div class="fr-messages-group" id="search-3850-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3860" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3853" aria-labelledby="button-3854">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-3853">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3855" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-3861" aria-expanded="false" aria-controls="collapse-3862" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3862">
<ul class="fr-menu__list">
<li>
<a id="nav-3863" href="#" class="fr-nav__link">Lien de navigation nav-3863</a>
</li>
<li>
<a id="nav-3864" href="#" class="fr-nav__link">Lien de navigation nav-3864</a>
</li>
<li>
<a id="nav-3865" href="#" class="fr-nav__link">Lien de navigation nav-3865</a>
</li>
<li>
<a id="nav-3866" href="#" class="fr-nav__link">Lien de navigation nav-3866</a>
</li>
<li>
<a id="nav-3867" href="#" class="fr-nav__link">Lien de navigation nav-3867</a>
</li>
<li>
<a id="nav-3868" href="#" class="fr-nav__link">Lien de navigation nav-3868</a>
</li>
<li>
<a id="nav-3869" href="#" class="fr-nav__link">Lien de navigation nav-3869</a>
</li>
<li>
<a id="nav-3870" href="#" class="fr-nav__link">Lien de navigation nav-3870</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3871" aria-expanded="false" aria-controls="collapse-3872" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3872">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3872" title="Fermer" type="button" id="button-4008" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3873" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3874" href="#" class="fr-nav__link">Lien de navigation nav-3874</a>
</li>
<li>
<a id="nav-3875" href="#" class="fr-nav__link">Lien de navigation nav-3875</a>
</li>
<li>
<a id="nav-3876" href="#" class="fr-nav__link">Lien de navigation nav-3876</a>
</li>
<li>
<a id="nav-3877" href="#" class="fr-nav__link">Lien de navigation nav-3877</a>
</li>
<li>
<a id="nav-3878" href="#" class="fr-nav__link">Lien de navigation nav-3878</a>
</li>
<li>
<a id="nav-3879" href="#" class="fr-nav__link">Lien de navigation nav-3879</a>
</li>
<li>
<a id="nav-3880" href="#" class="fr-nav__link">Lien de navigation nav-3880</a>
</li>
<li>
<a id="nav-3881" href="#" class="fr-nav__link">Lien de navigation nav-3881</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3882" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3883" href="#" class="fr-nav__link">Lien de navigation nav-3883</a>
</li>
<li>
<a id="nav-3884" href="#" class="fr-nav__link">Lien de navigation nav-3884</a>
</li>
<li>
<a id="nav-3885" href="#" class="fr-nav__link">Lien de navigation nav-3885</a>
</li>
<li>
<a id="nav-3886" href="#" class="fr-nav__link">Lien de navigation nav-3886</a>
</li>
<li>
<a id="nav-3887" href="#" class="fr-nav__link">Lien de navigation nav-3887</a>
</li>
<li>
<a id="nav-3888" href="#" class="fr-nav__link">Lien de navigation nav-3888</a>
</li>
<li>
<a id="nav-3889" href="#" class="fr-nav__link">Lien de navigation nav-3889</a>
</li>
<li>
<a id="nav-3890" href="#" class="fr-nav__link">Lien de navigation nav-3890</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3891" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3892" href="#" class="fr-nav__link">Lien de navigation nav-3892</a>
</li>
<li>
<a id="nav-3893" href="#" class="fr-nav__link">Lien de navigation nav-3893</a>
</li>
<li>
<a id="nav-3894" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3894</a>
</li>
<li>
<a id="nav-3895" href="#" class="fr-nav__link">Lien de navigation nav-3895</a>
</li>
<li>
<a id="nav-3896" href="#" class="fr-nav__link">Lien de navigation nav-3896</a>
</li>
<li>
<a id="nav-3897" href="#" class="fr-nav__link">Lien de navigation nav-3897</a>
</li>
<li>
<a id="nav-3898" href="#" class="fr-nav__link">Lien de navigation nav-3898</a>
</li>
<li>
<a id="nav-3899" href="#" class="fr-nav__link">Lien de navigation nav-3899</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3900" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3901" href="#" class="fr-nav__link">Lien de navigation nav-3901</a>
</li>
<li>
<a id="nav-3902" href="#" class="fr-nav__link">Lien de navigation nav-3902</a>
</li>
<li>
<a id="nav-3903" href="#" class="fr-nav__link">Lien de navigation nav-3903</a>
</li>
<li>
<a id="nav-3904" href="#" class="fr-nav__link">Lien de navigation nav-3904</a>
</li>
<li>
<a id="nav-3905" href="#" class="fr-nav__link">Lien de navigation nav-3905</a>
</li>
<li>
<a id="nav-3906" href="#" class="fr-nav__link">Lien de navigation nav-3906</a>
</li>
<li>
<a id="nav-3907" href="#" class="fr-nav__link">Lien de navigation nav-3907</a>
</li>
<li>
<a id="nav-3908" href="#" class="fr-nav__link">Lien de navigation nav-3908</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3909" type="link" href="#" class="fr-nav__link">accès direct nav-3909</a>
</li>
<li class="fr-nav__item">
<button id="menu-3910" aria-expanded="false" aria-controls="collapse-3911" aria-current="true" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3911">
<ul class="fr-menu__list">
<li>
<a id="nav-3912" href="#" class="fr-nav__link">Lien de navigation nav-3912</a>
</li>
<li>
<a id="nav-3913" href="#" class="fr-nav__link">Lien de navigation nav-3913</a>
</li>
<li>
<a id="nav-3914" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3914</a>
</li>
<li>
<a id="nav-3915" href="#" class="fr-nav__link">Lien de navigation nav-3915</a>
</li>
<li>
<a id="nav-3916" href="#" class="fr-nav__link">Lien de navigation nav-3916</a>
</li>
<li>
<a id="nav-3917" href="#" class="fr-nav__link">Lien de navigation nav-3917</a>
</li>
<li>
<a id="nav-3918" href="#" class="fr-nav__link">Lien de navigation nav-3918</a>
</li>
<li>
<a id="nav-3919" href="#" class="fr-nav__link">Lien de navigation nav-3919</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3920" aria-expanded="false" aria-controls="collapse-3921" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3921">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3921" title="Fermer" type="button" id="button-4009" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a id="link-3922" href="[url - à modifier]" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3923" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3924" href="#" class="fr-nav__link">Lien de navigation nav-3924</a>
</li>
<li>
<a id="nav-3925" href="#" class="fr-nav__link">Lien de navigation nav-3925</a>
</li>
<li>
<a id="nav-3926" href="#" class="fr-nav__link">Lien de navigation nav-3926</a>
</li>
<li>
<a id="nav-3927" href="#" class="fr-nav__link">Lien de navigation nav-3927</a>
</li>
<li>
<a id="nav-3928" href="#" class="fr-nav__link">Lien de navigation nav-3928</a>
</li>
<li>
<a id="nav-3929" href="#" class="fr-nav__link">Lien de navigation nav-3929</a>
</li>
<li>
<a id="nav-3930" href="#" class="fr-nav__link">Lien de navigation nav-3930</a>
</li>
<li>
<a id="nav-3931" href="#" class="fr-nav__link">Lien de navigation nav-3931</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3932" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3933" href="#" class="fr-nav__link">Lien de navigation nav-3933</a>
</li>
<li>
<a id="nav-3934" href="#" class="fr-nav__link">Lien de navigation nav-3934</a>
</li>
<li>
<a id="nav-3935" href="#" class="fr-nav__link">Lien de navigation nav-3935</a>
</li>
<li>
<a id="nav-3936" href="#" class="fr-nav__link">Lien de navigation nav-3936</a>
</li>
<li>
<a id="nav-3937" href="#" class="fr-nav__link">Lien de navigation nav-3937</a>
</li>
<li>
<a id="nav-3938" href="#" class="fr-nav__link">Lien de navigation nav-3938</a>
</li>
<li>
<a id="nav-3939" href="#" class="fr-nav__link">Lien de navigation nav-3939</a>
</li>
<li>
<a id="nav-3940" href="#" class="fr-nav__link">Lien de navigation nav-3940</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3941" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3942" href="#" class="fr-nav__link">Lien de navigation nav-3942</a>
</li>
<li>
<a id="nav-3943" href="#" class="fr-nav__link">Lien de navigation nav-3943</a>
</li>
<li>
<a id="nav-3944" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3944</a>
</li>
<li>
<a id="nav-3945" href="#" class="fr-nav__link">Lien de navigation nav-3945</a>
</li>
<li>
<a id="nav-3946" href="#" class="fr-nav__link">Lien de navigation nav-3946</a>
</li>
<li>
<a id="nav-3947" href="#" class="fr-nav__link">Lien de navigation nav-3947</a>
</li>
<li>
<a id="nav-3948" href="#" class="fr-nav__link">Lien de navigation nav-3948</a>
</li>
<li>
<a id="nav-3949" href="#" class="fr-nav__link">Lien de navigation nav-3949</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3950" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3951" href="#" class="fr-nav__link">Lien de navigation nav-3951</a>
</li>
<li>
<a id="nav-3952" href="#" class="fr-nav__link">Lien de navigation nav-3952</a>
</li>
<li>
<a id="nav-3953" href="#" class="fr-nav__link">Lien de navigation nav-3953</a>
</li>
<li>
<a id="nav-3954" href="#" class="fr-nav__link">Lien de navigation nav-3954</a>
</li>
<li>
<a id="nav-3955" href="#" class="fr-nav__link">Lien de navigation nav-3955</a>
</li>
<li>
<a id="nav-3956" href="#" class="fr-nav__link">Lien de navigation nav-3956</a>
</li>
<li>
<a id="nav-3957" href="#" class="fr-nav__link">Lien de navigation nav-3957</a>
</li>
<li>
<a id="nav-3958" href="#" class="fr-nav__link">Lien de navigation nav-3958</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3959" type="link" href="#" class="fr-nav__link">accès direct nav-3959</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3960" aria-expanded="false" aria-controls="collapse-3961" type="button" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3961">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button aria-controls="collapse-3961" title="Fermer" type="button" id="button-4010" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3962" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3963" href="#" class="fr-nav__link">Lien de navigation nav-3963</a>
</li>
<li>
<a id="nav-3964" href="#" class="fr-nav__link">Lien de navigation nav-3964</a>
</li>
<li>
<a id="nav-3965" href="#" class="fr-nav__link">Lien de navigation nav-3965</a>
</li>
<li>
<a id="nav-3966" href="#" class="fr-nav__link">Lien de navigation nav-3966</a>
</li>
<li>
<a id="nav-3967" href="#" class="fr-nav__link">Lien de navigation nav-3967</a>
</li>
<li>
<a id="nav-3968" href="#" class="fr-nav__link">Lien de navigation nav-3968</a>
</li>
<li>
<a id="nav-3969" href="#" class="fr-nav__link">Lien de navigation nav-3969</a>
</li>
<li>
<a id="nav-3970" href="#" class="fr-nav__link">Lien de navigation nav-3970</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3971" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3972" href="#" class="fr-nav__link">Lien de navigation nav-3972</a>
</li>
<li>
<a id="nav-3973" href="#" class="fr-nav__link">Lien de navigation nav-3973</a>
</li>
<li>
<a id="nav-3974" href="#" class="fr-nav__link">Lien de navigation nav-3974</a>
</li>
<li>
<a id="nav-3975" href="#" class="fr-nav__link">Lien de navigation nav-3975</a>
</li>
<li>
<a id="nav-3976" href="#" class="fr-nav__link">Lien de navigation nav-3976</a>
</li>
<li>
<a id="nav-3977" href="#" class="fr-nav__link">Lien de navigation nav-3977</a>
</li>
<li>
<a id="nav-3978" href="#" class="fr-nav__link">Lien de navigation nav-3978</a>
</li>
<li>
<a id="nav-3979" href="#" class="fr-nav__link">Lien de navigation nav-3979</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3980" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3981" href="#" class="fr-nav__link">Lien de navigation nav-3981</a>
</li>
<li>
<a id="nav-3982" href="#" class="fr-nav__link">Lien de navigation nav-3982</a>
</li>
<li>
<a id="nav-3983" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3983</a>
</li>
<li>
<a id="nav-3984" href="#" class="fr-nav__link">Lien de navigation nav-3984</a>
</li>
<li>
<a id="nav-3985" href="#" class="fr-nav__link">Lien de navigation nav-3985</a>
</li>
<li>
<a id="nav-3986" href="#" class="fr-nav__link">Lien de navigation nav-3986</a>
</li>
<li>
<a id="nav-3987" href="#" class="fr-nav__link">Lien de navigation nav-3987</a>
</li>
<li>
<a id="nav-3988" href="#" class="fr-nav__link">Lien de navigation nav-3988</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3989" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3990" href="#" class="fr-nav__link">Lien de navigation nav-3990</a>
</li>
<li>
<a id="nav-3991" href="#" class="fr-nav__link">Lien de navigation nav-3991</a>
</li>
<li>
<a id="nav-3992" href="#" class="fr-nav__link">Lien de navigation nav-3992</a>
</li>
<li>
<a id="nav-3993" href="#" class="fr-nav__link">Lien de navigation nav-3993</a>
</li>
<li>
<a id="nav-3994" href="#" class="fr-nav__link">Lien de navigation nav-3994</a>
</li>
<li>
<a id="nav-3995" href="#" class="fr-nav__link">Lien de navigation nav-3995</a>
</li>
<li>
<a id="nav-3996" href="#" class="fr-nav__link">Lien de navigation nav-3996</a>
</li>
<li>
<a id="nav-3997" href="#" class="fr-nav__link">Lien de navigation nav-3997</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-3998" aria-expanded="false" aria-controls="collapse-3999" type="button" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3999">
<ul class="fr-menu__list">
<li>
<a id="nav-4000" href="#" class="fr-nav__link">Lien de navigation nav-4000</a>
</li>
<li>
<a id="nav-4001" href="#" class="fr-nav__link">Lien de navigation nav-4001</a>
</li>
<li>
<a id="nav-4002" href="#" class="fr-nav__link">Lien de navigation nav-4002</a>
</li>
<li>
<a id="nav-4003" href="#" class="fr-nav__link">Lien de navigation nav-4003</a>
</li>
<li>
<a id="nav-4004" href="#" class="fr-nav__link">Lien de navigation nav-4004</a>
</li>
<li>
<a id="nav-4005" href="#" class="fr-nav__link">Lien de navigation nav-4005</a>
</li>
<li>
<a id="nav-4006" href="#" class="fr-nav__link">Lien de navigation nav-4006</a>
</li>
<li>
<a id="nav-4007" href="#" class="fr-nav__link">Lien de navigation nav-4007</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>