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-2165" title="Menu" type="button" id="button-2166" class="fr-btn--menu fr-btn">Menu</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2165" aria-labelledby="button-2166">
<div class="fr-container">
<button aria-controls="modal-2165" title="Fermer" type="button" id="button-2168" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2169" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-2170" type="link" href="#" class="fr-nav__link">accès direct nav-2170</a>
</li>
<li class="fr-nav__item">
<a id="nav-2171" type="link" href="#" class="fr-nav__link">accès direct nav-2171</a>
</li>
<li class="fr-nav__item">
<a id="nav-2172" type="link" href="#" class="fr-nav__link">accès direct nav-2172</a>
</li>
<li class="fr-nav__item">
<a id="nav-2173" type="link" href="#" class="fr-nav__link">accès direct nav-2173</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-2179" title="Menu" type="button" id="button-2180" 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-2179" aria-labelledby="button-2180">
<div class="fr-container">
<button aria-controls="modal-2179" title="Fermer" type="button" id="button-2181" 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-2186" title="Menu" type="button" id="button-2187" 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-2186" aria-labelledby="button-2187">
<div class="fr-container">
<button aria-controls="modal-2186" title="Fermer" type="button" id="button-2188" 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-2351" title="Rechercher" type="button" id="button-2352" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-2353" title="Menu" type="button" id="button-2354" 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-2351" aria-labelledby="button-2352">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-2351" title="Fermer" type="button" id="button-2356" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-2350" role="search">
<label class="fr-label" for="search-2350-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2350-input-messages" placeholder="Rechercher" id="search-2350-input" type="search">
<div class="fr-messages-group" id="search-2350-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-2358" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2353" aria-labelledby="button-2354">
<div class="fr-container">
<button aria-controls="modal-2353" title="Fermer" type="button" id="button-2359" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2355" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-2360" aria-expanded="false" aria-controls="collapse-2361" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2361">
<ul class="fr-menu__list">
<li>
<a id="nav-2362" href="#" class="fr-nav__link">Lien de navigation nav-2362</a>
</li>
<li>
<a id="nav-2363" href="#" class="fr-nav__link">Lien de navigation nav-2363</a>
</li>
<li>
<a id="nav-2364" href="#" class="fr-nav__link">Lien de navigation nav-2364</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2370" aria-expanded="false" aria-controls="collapse-2371" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2371">
<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-2371" title="Fermer" type="button" id="button-2507" 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-2372" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2373" href="#" class="fr-nav__link">Lien de navigation nav-2373</a>
</li>
<li>
<a id="nav-2374" href="#" class="fr-nav__link">Lien de navigation nav-2374</a>
</li>
<li>
<a id="nav-2375" href="#" class="fr-nav__link">Lien de navigation nav-2375</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2381" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2384" href="#" class="fr-nav__link">Lien de navigation nav-2384</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2390" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2393" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2393</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2399" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2402" href="#" class="fr-nav__link">Lien de navigation nav-2402</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2408" type="link" href="#" class="fr-nav__link">accès direct nav-2408</a>
</li>
<li class="fr-nav__item">
<button id="menu-2409" aria-expanded="false" aria-controls="collapse-2410" aria-current="true" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2410">
<ul class="fr-menu__list">
<li>
<a id="nav-2411" href="#" class="fr-nav__link">Lien de navigation nav-2411</a>
</li>
<li>
<a id="nav-2412" href="#" class="fr-nav__link">Lien de navigation nav-2412</a>
</li>
<li>
<a id="nav-2413" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2413</a>
</li>
<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" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2419" aria-expanded="false" aria-controls="collapse-2420" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2420">
<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-2420" title="Fermer" type="button" id="button-2508" 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-2421" 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-2422" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2423" href="#" class="fr-nav__link">Lien de navigation nav-2423</a>
</li>
<li>
<a id="nav-2424" href="#" class="fr-nav__link">Lien de navigation nav-2424</a>
</li>
<li>
<a id="nav-2425" href="#" class="fr-nav__link">Lien de navigation nav-2425</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2431" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2434" href="#" class="fr-nav__link">Lien de navigation nav-2434</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2440" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2443" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2443</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2449" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2452" href="#" class="fr-nav__link">Lien de navigation nav-2452</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2458" type="link" href="#" class="fr-nav__link">accès direct nav-2458</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2459" aria-expanded="false" aria-controls="collapse-2460" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2460">
<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-2460" title="Fermer" type="button" id="button-2509" 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-2461" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2462" href="#" class="fr-nav__link">Lien de navigation nav-2462</a>
</li>
<li>
<a id="nav-2463" href="#" class="fr-nav__link">Lien de navigation nav-2463</a>
</li>
<li>
<a id="nav-2464" href="#" class="fr-nav__link">Lien de navigation nav-2464</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2470" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2473" href="#" class="fr-nav__link">Lien de navigation nav-2473</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2479" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2482" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2482</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2488" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2491" href="#" class="fr-nav__link">Lien de navigation nav-2491</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-2497" aria-expanded="false" aria-controls="collapse-2498" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2498">
<ul class="fr-menu__list">
<li>
<a id="nav-2499" href="#" class="fr-nav__link">Lien de navigation nav-2499</a>
</li>
<li>
<a id="nav-2500" href="#" class="fr-nav__link">Lien de navigation nav-2500</a>
</li>
<li>
<a id="nav-2501" href="#" class="fr-nav__link">Lien de navigation nav-2501</a>
</li>
<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>
</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-2674" title="Menu" type="button" id="button-2675" 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-2677">
<div class="fr-nav__item">
<button aria-controls="translate-2673" 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-2673">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" id="language-2678" 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-2679">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/" id="language-2680">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="/de/" id="language-2681">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="/tr/" id="language-2682">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="/ro/" id="language-2683">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2674" aria-labelledby="button-2675">
<div class="fr-container">
<button aria-controls="modal-2674" title="Fermer" type="button" id="button-2684" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2676" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-2685" aria-expanded="false" aria-controls="collapse-2686" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2686">
<ul class="fr-menu__list">
<li>
<a id="nav-2687" href="#" class="fr-nav__link">Lien de navigation nav-2687</a>
</li>
<li>
<a id="nav-2688" href="#" class="fr-nav__link">Lien de navigation nav-2688</a>
</li>
<li>
<a id="nav-2689" href="#" class="fr-nav__link">Lien de navigation nav-2689</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2695" aria-expanded="false" aria-controls="collapse-2696" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2696">
<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-2696" title="Fermer" type="button" id="button-2832" 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-2697" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2698" href="#" class="fr-nav__link">Lien de navigation nav-2698</a>
</li>
<li>
<a id="nav-2699" href="#" class="fr-nav__link">Lien de navigation nav-2699</a>
</li>
<li>
<a id="nav-2700" href="#" class="fr-nav__link">Lien de navigation nav-2700</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2706" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2709" href="#" class="fr-nav__link">Lien de navigation nav-2709</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2715" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2718" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2718</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2724" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2727" href="#" class="fr-nav__link">Lien de navigation nav-2727</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2733" type="link" href="#" class="fr-nav__link">accès direct nav-2733</a>
</li>
<li class="fr-nav__item">
<button id="menu-2734" aria-expanded="false" aria-controls="collapse-2735" aria-current="true" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2735">
<ul class="fr-menu__list">
<li>
<a id="nav-2736" href="#" class="fr-nav__link">Lien de navigation nav-2736</a>
</li>
<li>
<a id="nav-2737" href="#" class="fr-nav__link">Lien de navigation nav-2737</a>
</li>
<li>
<a id="nav-2738" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2738</a>
</li>
<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" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2744" aria-expanded="false" aria-controls="collapse-2745" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2745">
<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-2745" title="Fermer" type="button" id="button-2833" 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-2746" 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-2747" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2748" href="#" class="fr-nav__link">Lien de navigation nav-2748</a>
</li>
<li>
<a id="nav-2749" href="#" class="fr-nav__link">Lien de navigation nav-2749</a>
</li>
<li>
<a id="nav-2750" href="#" class="fr-nav__link">Lien de navigation nav-2750</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2756" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2759" href="#" class="fr-nav__link">Lien de navigation nav-2759</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2765" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2768" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2768</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2774" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2777" href="#" class="fr-nav__link">Lien de navigation nav-2777</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-2783" type="link" href="#" class="fr-nav__link">accès direct nav-2783</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-2784" aria-expanded="false" aria-controls="collapse-2785" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2785">
<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-2785" title="Fermer" type="button" id="button-2834" 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-2786" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-2787" href="#" class="fr-nav__link">Lien de navigation nav-2787</a>
</li>
<li>
<a id="nav-2788" href="#" class="fr-nav__link">Lien de navigation nav-2788</a>
</li>
<li>
<a id="nav-2789" href="#" class="fr-nav__link">Lien de navigation nav-2789</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2795" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2798" href="#" class="fr-nav__link">Lien de navigation nav-2798</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2804" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2807" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-2807</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-2813" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-2816" href="#" class="fr-nav__link">Lien de navigation nav-2816</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-2822" aria-expanded="false" aria-controls="collapse-2823" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2823">
<ul class="fr-menu__list">
<li>
<a id="nav-2824" href="#" class="fr-nav__link">Lien de navigation nav-2824</a>
</li>
<li>
<a id="nav-2825" href="#" class="fr-nav__link">Lien de navigation nav-2825</a>
</li>
<li>
<a id="nav-2826" href="#" class="fr-nav__link">Lien de navigation nav-2826</a>
</li>
<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>
</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-2999" title="Menu" type="button" id="button-3000" 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-3002">
<div class="fr-nav__item">
<button aria-controls="translate-2998" 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-2998">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" id="language-3003" 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-3004">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/" id="language-3005">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="/de/" id="language-3006">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="/tr/" id="language-3007">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="/ro/" id="language-3008">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2999" aria-labelledby="button-3000">
<div class="fr-container">
<button aria-controls="modal-2999" title="Fermer" type="button" id="button-3009" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3001" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-3010" aria-expanded="false" aria-controls="collapse-3011" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3011">
<ul class="fr-menu__list">
<li>
<a id="nav-3012" href="#" class="fr-nav__link">Lien de navigation nav-3012</a>
</li>
<li>
<a id="nav-3013" href="#" class="fr-nav__link">Lien de navigation nav-3013</a>
</li>
<li>
<a id="nav-3014" href="#" class="fr-nav__link">Lien de navigation nav-3014</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3020" aria-expanded="false" aria-controls="collapse-3021" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3021">
<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-3021" title="Fermer" type="button" id="button-3157" 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-3022" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3023" href="#" class="fr-nav__link">Lien de navigation nav-3023</a>
</li>
<li>
<a id="nav-3024" href="#" class="fr-nav__link">Lien de navigation nav-3024</a>
</li>
<li>
<a id="nav-3025" href="#" class="fr-nav__link">Lien de navigation nav-3025</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3031" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3034" href="#" class="fr-nav__link">Lien de navigation nav-3034</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3040" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3043" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3043</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3049" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3052" href="#" class="fr-nav__link">Lien de navigation nav-3052</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3058" type="link" href="#" class="fr-nav__link">accès direct nav-3058</a>
</li>
<li class="fr-nav__item">
<button id="menu-3059" aria-expanded="false" aria-controls="collapse-3060" aria-current="true" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3060">
<ul class="fr-menu__list">
<li>
<a id="nav-3061" href="#" class="fr-nav__link">Lien de navigation nav-3061</a>
</li>
<li>
<a id="nav-3062" href="#" class="fr-nav__link">Lien de navigation nav-3062</a>
</li>
<li>
<a id="nav-3063" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3063</a>
</li>
<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" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3069" aria-expanded="false" aria-controls="collapse-3070" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3070">
<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-3070" title="Fermer" type="button" id="button-3158" 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-3071" 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-3072" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3073" href="#" class="fr-nav__link">Lien de navigation nav-3073</a>
</li>
<li>
<a id="nav-3074" href="#" class="fr-nav__link">Lien de navigation nav-3074</a>
</li>
<li>
<a id="nav-3075" href="#" class="fr-nav__link">Lien de navigation nav-3075</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3081" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3084" href="#" class="fr-nav__link">Lien de navigation nav-3084</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3090" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3093" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3093</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3099" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3102" href="#" class="fr-nav__link">Lien de navigation nav-3102</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3108" type="link" href="#" class="fr-nav__link">accès direct nav-3108</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3109" aria-expanded="false" aria-controls="collapse-3110" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3110">
<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-3110" title="Fermer" type="button" id="button-3159" 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-3111" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3112" href="#" class="fr-nav__link">Lien de navigation nav-3112</a>
</li>
<li>
<a id="nav-3113" href="#" class="fr-nav__link">Lien de navigation nav-3113</a>
</li>
<li>
<a id="nav-3114" href="#" class="fr-nav__link">Lien de navigation nav-3114</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3120" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3123" href="#" class="fr-nav__link">Lien de navigation nav-3123</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3129" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3132" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3132</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3138" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3141" href="#" class="fr-nav__link">Lien de navigation nav-3141</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-3147" aria-expanded="false" aria-controls="collapse-3148" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3148">
<ul class="fr-menu__list">
<li>
<a id="nav-3149" href="#" class="fr-nav__link">Lien de navigation nav-3149</a>
</li>
<li>
<a id="nav-3150" href="#" class="fr-nav__link">Lien de navigation nav-3150</a>
</li>
<li>
<a id="nav-3151" href="#" class="fr-nav__link">Lien de navigation nav-3151</a>
</li>
<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>
</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-3324" title="Menu" type="button" id="button-3325" 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-3327">
<div class="fr-nav__item">
<button aria-controls="translate-3323" 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-3323">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" id="language-3328" 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-3329">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/" id="language-3330">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="/de/" id="language-3331">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="/tr/" id="language-3332">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="/ro/" id="language-3333">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3324" aria-labelledby="button-3325">
<div class="fr-container">
<button aria-controls="modal-3324" title="Fermer" type="button" id="button-3334" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3326" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-3335" aria-expanded="false" aria-controls="collapse-3336" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3336">
<ul class="fr-menu__list">
<li>
<a id="nav-3337" href="#" class="fr-nav__link">Lien de navigation nav-3337</a>
</li>
<li>
<a id="nav-3338" href="#" class="fr-nav__link">Lien de navigation nav-3338</a>
</li>
<li>
<a id="nav-3339" href="#" class="fr-nav__link">Lien de navigation nav-3339</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3345" aria-expanded="false" aria-controls="collapse-3346" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3346">
<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-3346" title="Fermer" type="button" id="button-3482" 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-3347" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3348" href="#" class="fr-nav__link">Lien de navigation nav-3348</a>
</li>
<li>
<a id="nav-3349" href="#" class="fr-nav__link">Lien de navigation nav-3349</a>
</li>
<li>
<a id="nav-3350" href="#" class="fr-nav__link">Lien de navigation nav-3350</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3356" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3359" href="#" class="fr-nav__link">Lien de navigation nav-3359</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3365" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3368" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3368</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3374" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3377" href="#" class="fr-nav__link">Lien de navigation nav-3377</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3383" type="link" href="#" class="fr-nav__link">accès direct nav-3383</a>
</li>
<li class="fr-nav__item">
<button id="menu-3384" aria-expanded="false" aria-controls="collapse-3385" aria-current="true" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3385">
<ul class="fr-menu__list">
<li>
<a id="nav-3386" href="#" class="fr-nav__link">Lien de navigation nav-3386</a>
</li>
<li>
<a id="nav-3387" href="#" class="fr-nav__link">Lien de navigation nav-3387</a>
</li>
<li>
<a id="nav-3388" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3388</a>
</li>
<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" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3394" aria-expanded="false" aria-controls="collapse-3395" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3395">
<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-3395" title="Fermer" type="button" id="button-3483" 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-3396" 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-3397" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3398" href="#" class="fr-nav__link">Lien de navigation nav-3398</a>
</li>
<li>
<a id="nav-3399" href="#" class="fr-nav__link">Lien de navigation nav-3399</a>
</li>
<li>
<a id="nav-3400" href="#" class="fr-nav__link">Lien de navigation nav-3400</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3406" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3409" href="#" class="fr-nav__link">Lien de navigation nav-3409</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3415" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3418" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3418</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3424" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3427" href="#" class="fr-nav__link">Lien de navigation nav-3427</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3433" type="link" href="#" class="fr-nav__link">accès direct nav-3433</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3434" aria-expanded="false" aria-controls="collapse-3435" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3435">
<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-3435" title="Fermer" type="button" id="button-3484" 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-3436" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3437" href="#" class="fr-nav__link">Lien de navigation nav-3437</a>
</li>
<li>
<a id="nav-3438" href="#" class="fr-nav__link">Lien de navigation nav-3438</a>
</li>
<li>
<a id="nav-3439" href="#" class="fr-nav__link">Lien de navigation nav-3439</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3445" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3448" href="#" class="fr-nav__link">Lien de navigation nav-3448</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3454" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3457" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3457</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3463" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3466" href="#" class="fr-nav__link">Lien de navigation nav-3466</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-3472" aria-expanded="false" aria-controls="collapse-3473" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3473">
<ul class="fr-menu__list">
<li>
<a id="nav-3474" href="#" class="fr-nav__link">Lien de navigation nav-3474</a>
</li>
<li>
<a id="nav-3475" href="#" class="fr-nav__link">Lien de navigation nav-3475</a>
</li>
<li>
<a id="nav-3476" href="#" class="fr-nav__link">Lien de navigation nav-3476</a>
</li>
<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>
</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-3495" title="Menu" type="button" id="button-3496" 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-3495" aria-labelledby="button-3496">
<div class="fr-container">
<button aria-controls="modal-3495" title="Fermer" type="button" id="button-3498" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3499" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3500" type="link" href="#" class="fr-nav__link">accès direct nav-3500</a>
</li>
<li class="fr-nav__item">
<a id="nav-3501" type="link" href="#" class="fr-nav__link">accès direct nav-3501</a>
</li>
<li class="fr-nav__item">
<a id="nav-3502" type="link" href="#" class="fr-nav__link">accès direct nav-3502</a>
</li>
<li class="fr-nav__item">
<a id="nav-3503" type="link" href="#" class="fr-nav__link">accès direct nav-3503</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-3521" title="Rechercher" type="button" id="button-3522" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3523" title="Menu" type="button" id="button-3524" 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-3521" aria-labelledby="button-3522">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3521" title="Fermer" type="button" id="button-3526" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3520" role="search">
<label class="fr-label" for="search-3520-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3520-input-messages" placeholder="Rechercher" id="search-3520-input" type="search">
<div class="fr-messages-group" id="search-3520-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3528" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3523" aria-labelledby="button-3524">
<div class="fr-container">
<button aria-controls="modal-3523" title="Fermer" type="button" id="button-3529" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3530" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3531" type="link" href="#" class="fr-nav__link">accès direct nav-3531</a>
</li>
<li class="fr-nav__item">
<a id="nav-3532" type="link" href="#" class="fr-nav__link">accès direct nav-3532</a>
</li>
<li class="fr-nav__item">
<a id="nav-3533" type="link" href="#" class="fr-nav__link">accès direct nav-3533</a>
</li>
<li class="fr-nav__item">
<a id="nav-3534" type="link" href="#" class="fr-nav__link">accès direct nav-3534</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-3552" title="Rechercher" type="button" id="button-3553" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3554" title="Menu" type="button" id="button-3555" 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-3552" aria-labelledby="button-3553">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3552" title="Fermer" type="button" id="button-3557" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3551" role="search">
<label class="fr-label" for="search-3551-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3551-input-messages" placeholder="Rechercher" id="search-3551-input" type="search">
<div class="fr-messages-group" id="search-3551-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3559" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3554" aria-labelledby="button-3555">
<div class="fr-container">
<button aria-controls="modal-3554" title="Fermer" type="button" id="button-3560" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3561" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3562" type="link" href="#" class="fr-nav__link">accès direct nav-3562</a>
</li>
<li class="fr-nav__item">
<a id="nav-3563" type="link" href="#" class="fr-nav__link">accès direct nav-3563</a>
</li>
<li class="fr-nav__item">
<a id="nav-3564" type="link" href="#" class="fr-nav__link">accès direct nav-3564</a>
</li>
<li class="fr-nav__item">
<a id="nav-3565" type="link" href="#" class="fr-nav__link">accès direct nav-3565</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-3583" title="Rechercher" type="button" id="button-3584" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3585" title="Menu" type="button" id="button-3586" 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-3583" aria-labelledby="button-3584">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3583" title="Fermer" type="button" id="button-3588" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3582" role="search">
<label class="fr-label" for="search-3582-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3582-input-messages" placeholder="Rechercher" id="search-3582-input" type="search">
<div class="fr-messages-group" id="search-3582-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3590" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3585" aria-labelledby="button-3586">
<div class="fr-container">
<button aria-controls="modal-3585" title="Fermer" type="button" id="button-3591" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3592" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3593" type="link" href="#" class="fr-nav__link">accès direct nav-3593</a>
</li>
<li class="fr-nav__item">
<a id="nav-3594" type="link" href="#" class="fr-nav__link">accès direct nav-3594</a>
</li>
<li class="fr-nav__item">
<a id="nav-3595" type="link" href="#" class="fr-nav__link">accès direct nav-3595</a>
</li>
<li class="fr-nav__item">
<a id="nav-3596" type="link" href="#" class="fr-nav__link">accès direct nav-3596</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-3601" title="Menu" type="button" id="button-3602" 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-3601" aria-labelledby="button-3602">
<div class="fr-container">
<button aria-controls="modal-3601" title="Fermer" type="button" id="button-3603" 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-3621" title="Rechercher" type="button" id="button-3622" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3623" title="Menu" type="button" id="button-3624" 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-3621" aria-labelledby="button-3622">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3621" title="Fermer" type="button" id="button-3626" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3620" role="search">
<label class="fr-label" for="search-3620-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3620-input-messages" placeholder="Rechercher" id="search-3620-input" type="search">
<div class="fr-messages-group" id="search-3620-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3628" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3623" aria-labelledby="button-3624">
<div class="fr-container">
<button aria-controls="modal-3623" title="Fermer" type="button" id="button-3629" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3630" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3631" type="link" href="#" class="fr-nav__link">accès direct nav-3631</a>
</li>
<li class="fr-nav__item">
<a id="nav-3632" type="link" href="#" class="fr-nav__link">accès direct nav-3632</a>
</li>
<li class="fr-nav__item">
<a id="nav-3633" type="link" href="#" class="fr-nav__link">accès direct nav-3633</a>
</li>
<li class="fr-nav__item">
<a id="nav-3634" type="link" href="#" class="fr-nav__link">accès direct nav-3634</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-3652" title="Rechercher" type="button" id="button-3653" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3654" title="Menu" type="button" id="button-3655" 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-3652" aria-labelledby="button-3653">
<div class="fr-container fr-container-lg--fluid">
<button aria-controls="modal-3652" title="Fermer" type="button" id="button-3657" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-search-bar" id="search-3651" role="search">
<label class="fr-label" for="search-3651-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3651-input-messages" placeholder="Rechercher" id="search-3651-input" type="search">
<div class="fr-messages-group" id="search-3651-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3659" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3654" aria-labelledby="button-3655">
<div class="fr-container">
<button aria-controls="modal-3654" title="Fermer" type="button" id="button-3660" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3661" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3662" type="link" href="#" class="fr-nav__link">accès direct nav-3662</a>
</li>
<li class="fr-nav__item">
<a id="nav-3663" type="link" href="#" class="fr-nav__link">accès direct nav-3663</a>
</li>
<li class="fr-nav__item">
<a id="nav-3664" type="link" href="#" class="fr-nav__link">accès direct nav-3664</a>
</li>
<li class="fr-nav__item">
<a id="nav-3665" type="link" href="#" class="fr-nav__link">accès direct nav-3665</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-3676" title="Menu" type="button" id="button-3677" 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-3676" aria-labelledby="button-3677">
<div class="fr-container">
<button aria-controls="modal-3676" title="Fermer" type="button" id="button-3679" class="fr-btn--close fr-btn">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3680" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a id="nav-3681" type="link" href="#" class="fr-nav__link">accès direct nav-3681</a>
</li>
<li class="fr-nav__item">
<a id="nav-3682" type="link" href="#" class="fr-nav__link">accès direct nav-3682</a>
</li>
<li class="fr-nav__item">
<a id="nav-3683" type="link" href="#" class="fr-nav__link">accès direct nav-3683</a>
</li>
<li class="fr-nav__item">
<a id="nav-3684" type="link" href="#" class="fr-nav__link">accès direct nav-3684</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-3848" title="Rechercher" type="button" id="button-3849" class="fr-btn--search fr-btn">Rechercher</button>
<button data-fr-opened="false" aria-controls="modal-3850" title="Menu" type="button" id="button-3851" 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-3853" href="[url - à modifier]" class="fr-link fr-icon-add-circle-line">Créer un espace</a>
</li>
<li>
<a id="link-3854" href="[url - à modifier]" class="fr-link fr-icon-lock-line">Se connecter</a>
</li>
<li>
<a id="link-3855" 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-3848" aria-labelledby="button-3849">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-3848">Fermer</button>
<div class="fr-search-bar" id="search-3847" role="search">
<label class="fr-label" for="search-3847-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3847-input-messages" placeholder="Rechercher" id="search-3847-input" type="search">
<div class="fr-messages-group" id="search-3847-input-messages" aria-live="polite">
</div>
<button title="Rechercher" type="button" id="search-btn-3857" class="fr-btn">Rechercher</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3850" aria-labelledby="button-3851">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-3850">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3852" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button id="menu-3858" aria-expanded="false" aria-controls="collapse-3859" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3859">
<ul class="fr-menu__list">
<li>
<a id="nav-3860" href="#" class="fr-nav__link">Lien de navigation nav-3860</a>
</li>
<li>
<a id="nav-3861" href="#" class="fr-nav__link">Lien de navigation nav-3861</a>
</li>
<li>
<a id="nav-3862" href="#" class="fr-nav__link">Lien de navigation nav-3862</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3868" aria-expanded="false" aria-controls="collapse-3869" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3869">
<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-3869" title="Fermer" type="button" id="button-4005" 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-3870" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3871" href="#" class="fr-nav__link">Lien de navigation nav-3871</a>
</li>
<li>
<a id="nav-3872" href="#" class="fr-nav__link">Lien de navigation nav-3872</a>
</li>
<li>
<a id="nav-3873" href="#" class="fr-nav__link">Lien de navigation nav-3873</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3879" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3882" href="#" class="fr-nav__link">Lien de navigation nav-3882</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3888" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3891" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3891</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3897" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3900" href="#" class="fr-nav__link">Lien de navigation nav-3900</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3906" type="link" href="#" class="fr-nav__link">accès direct nav-3906</a>
</li>
<li class="fr-nav__item">
<button id="menu-3907" aria-expanded="false" aria-controls="collapse-3908" aria-current="true" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3908">
<ul class="fr-menu__list">
<li>
<a id="nav-3909" href="#" class="fr-nav__link">Lien de navigation nav-3909</a>
</li>
<li>
<a id="nav-3910" href="#" class="fr-nav__link">Lien de navigation nav-3910</a>
</li>
<li>
<a id="nav-3911" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3911</a>
</li>
<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" 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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3917" aria-expanded="false" aria-controls="collapse-3918" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3918">
<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-3918" title="Fermer" type="button" id="button-4006" 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-3919" 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-3920" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3921" href="#" class="fr-nav__link">Lien de navigation nav-3921</a>
</li>
<li>
<a id="nav-3922" href="#" class="fr-nav__link">Lien de navigation nav-3922</a>
</li>
<li>
<a id="nav-3923" href="#" class="fr-nav__link">Lien de navigation nav-3923</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3929" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3932" href="#" class="fr-nav__link">Lien de navigation nav-3932</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3938" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3941" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3941</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3947" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3950" href="#" class="fr-nav__link">Lien de navigation nav-3950</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a id="nav-3956" type="link" href="#" class="fr-nav__link">accès direct nav-3956</a>
</li>
<li class="fr-nav__item">
<button id="mega-menu-3957" aria-expanded="false" aria-controls="collapse-3958" type="mega-menu" class="fr-nav__btn">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3958">
<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-3958" title="Fermer" type="button" id="button-4007" 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-3959" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a id="nav-3960" href="#" class="fr-nav__link">Lien de navigation nav-3960</a>
</li>
<li>
<a id="nav-3961" href="#" class="fr-nav__link">Lien de navigation nav-3961</a>
</li>
<li>
<a id="nav-3962" href="#" class="fr-nav__link">Lien de navigation nav-3962</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3968" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3971" href="#" class="fr-nav__link">Lien de navigation nav-3971</a>
</li>
<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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3977" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3980" aria-current="page" href="#" class="fr-nav__link">Lien de navigation nav-3980</a>
</li>
<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" 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>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a id="category-3986" href="#" class="fr-nav__link">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a id="nav-3989" href="#" class="fr-nav__link">Lien de navigation nav-3989</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button id="menu-3995" aria-expanded="false" aria-controls="collapse-3996" type="menu" class="fr-nav__btn">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3996">
<ul class="fr-menu__list">
<li>
<a id="nav-3997" href="#" class="fr-nav__link">Lien de navigation nav-3997</a>
</li>
<li>
<a id="nav-3998" href="#" class="fr-nav__link">Lien de navigation nav-3998</a>
</li>
<li>
<a id="nav-3999" href="#" class="fr-nav__link">Lien de navigation nav-3999</a>
</li>
<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>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>