Header minimal
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2299" aria-haspopup="menu" id="button-2300" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2299" aria-labelledby="button-2300">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2299" id="button-2302" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2303" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2304">accès direct nav-2304</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2305">accès direct nav-2305</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2306">accès direct nav-2306</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2307">accès direct nav-2307</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 class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2314" aria-haspopup="menu" id="button-2315" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<a class="fr-btn--account fr-btn fr-btn" id="button-2316" href="#[url - à modifier]">
Espace particulier
</a>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2314" aria-labelledby="button-2315">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2314" id="button-2317" title="Fermer">
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 class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2325" aria-haspopup="menu" id="button-2326" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-2327" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-2328" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-2329" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2325" aria-labelledby="button-2326">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2325" id="button-2330" title="Fermer">
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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-2496" id="button-2497" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2498" aria-haspopup="menu" id="button-2499" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-2501" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-2502" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-2503" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2496" aria-labelledby="button-2497">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2496" id="button-2504" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2495" role="search">
<label class="fr-label" for="search-2495-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2495-input-messages" placeholder="Rechercher" id="search-2495-input" type="search">
<div class="fr-messages-group" id="search-2495-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2506" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2498" aria-labelledby="button-2499">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2498" id="button-2507" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2500" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2509">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2509">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2510">Lien de navigation nav-2510</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2511">Lien de navigation nav-2511</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2512">Lien de navigation nav-2512</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2513">Lien de navigation nav-2513</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2514">Lien de navigation nav-2514</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2515">Lien de navigation nav-2515</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2516">Lien de navigation nav-2516</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2517">Lien de navigation nav-2517</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2519">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2519">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2519" id="button-2655" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2520">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2521">Lien de navigation nav-2521</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2522">Lien de navigation nav-2522</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2523">Lien de navigation nav-2523</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2524">Lien de navigation nav-2524</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2525">Lien de navigation nav-2525</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2526">Lien de navigation nav-2526</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2527">Lien de navigation nav-2527</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2528">Lien de navigation nav-2528</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2529">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2530">Lien de navigation nav-2530</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2531">Lien de navigation nav-2531</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2532">Lien de navigation nav-2532</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2533">Lien de navigation nav-2533</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2534">Lien de navigation nav-2534</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2535">Lien de navigation nav-2535</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2536">Lien de navigation nav-2536</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2537">Lien de navigation nav-2537</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2538">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2539">Lien de navigation nav-2539</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2540">Lien de navigation nav-2540</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2541" aria-current="page">Lien de navigation nav-2541</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2542">Lien de navigation nav-2542</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2543">Lien de navigation nav-2543</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2544">Lien de navigation nav-2544</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2545">Lien de navigation nav-2545</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2546">Lien de navigation nav-2546</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2547">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2548">Lien de navigation nav-2548</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2549">Lien de navigation nav-2549</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2550">Lien de navigation nav-2550</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2551">Lien de navigation nav-2551</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2552">Lien de navigation nav-2552</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2553">Lien de navigation nav-2553</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2554">Lien de navigation nav-2554</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2555">Lien de navigation nav-2555</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2556">accès direct nav-2556</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2558" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2558">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2559">Lien de navigation nav-2559</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2560">Lien de navigation nav-2560</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2561" aria-current="page">Lien de navigation nav-2561</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2562">Lien de navigation nav-2562</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2563">Lien de navigation nav-2563</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2564">Lien de navigation nav-2564</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2565">Lien de navigation nav-2565</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2566">Lien de navigation nav-2566</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2568">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2568">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2568" id="button-2656" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-2569" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2570">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2571">Lien de navigation nav-2571</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2572">Lien de navigation nav-2572</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2573">Lien de navigation nav-2573</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2574">Lien de navigation nav-2574</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2575">Lien de navigation nav-2575</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2576">Lien de navigation nav-2576</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2577">Lien de navigation nav-2577</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2578">Lien de navigation nav-2578</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2579">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2580">Lien de navigation nav-2580</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2581">Lien de navigation nav-2581</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2582">Lien de navigation nav-2582</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2583">Lien de navigation nav-2583</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2584">Lien de navigation nav-2584</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2585">Lien de navigation nav-2585</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2586">Lien de navigation nav-2586</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2587">Lien de navigation nav-2587</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2588">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2589">Lien de navigation nav-2589</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2590">Lien de navigation nav-2590</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2591" aria-current="page">Lien de navigation nav-2591</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2592">Lien de navigation nav-2592</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2593">Lien de navigation nav-2593</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2594">Lien de navigation nav-2594</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2595">Lien de navigation nav-2595</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2596">Lien de navigation nav-2596</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2597">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2598">Lien de navigation nav-2598</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2599">Lien de navigation nav-2599</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2600">Lien de navigation nav-2600</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2601">Lien de navigation nav-2601</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2602">Lien de navigation nav-2602</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2603">Lien de navigation nav-2603</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2604">Lien de navigation nav-2604</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2605">Lien de navigation nav-2605</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2606">accès direct nav-2606</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2608">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2608">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2608" id="button-2657" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2609">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2610">Lien de navigation nav-2610</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2611">Lien de navigation nav-2611</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2612">Lien de navigation nav-2612</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2613">Lien de navigation nav-2613</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2614">Lien de navigation nav-2614</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2615">Lien de navigation nav-2615</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2616">Lien de navigation nav-2616</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2617">Lien de navigation nav-2617</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2618">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2619">Lien de navigation nav-2619</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2620">Lien de navigation nav-2620</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2621">Lien de navigation nav-2621</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2622">Lien de navigation nav-2622</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2623">Lien de navigation nav-2623</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2624">Lien de navigation nav-2624</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2625">Lien de navigation nav-2625</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2626">Lien de navigation nav-2626</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2627">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2628">Lien de navigation nav-2628</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2629">Lien de navigation nav-2629</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2630" aria-current="page">Lien de navigation nav-2630</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2631">Lien de navigation nav-2631</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2632">Lien de navigation nav-2632</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2633">Lien de navigation nav-2633</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2634">Lien de navigation nav-2634</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2635">Lien de navigation nav-2635</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2636">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2637">Lien de navigation nav-2637</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2638">Lien de navigation nav-2638</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2639">Lien de navigation nav-2639</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2640">Lien de navigation nav-2640</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2641">Lien de navigation nav-2641</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2642">Lien de navigation nav-2642</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2643">Lien de navigation nav-2643</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2644">Lien de navigation nav-2644</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2646">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2646">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2647">Lien de navigation nav-2647</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2648">Lien de navigation nav-2648</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2649">Lien de navigation nav-2649</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2650">Lien de navigation nav-2650</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2651">Lien de navigation nav-2651</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2652">Lien de navigation nav-2652</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2653">Lien de navigation nav-2653</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2654">Lien de navigation nav-2654</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 class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2823" aria-haspopup="menu" id="button-2824" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<nav role="navigation" class="fr-translate fr-nav" id="translate-2826">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn" aria-controls="translate-2822" aria-expanded="false" title="Sélectionner une langue" id="button-2827">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2822">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2828" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2829">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2830">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2831">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2832">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2833">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2823" aria-labelledby="button-2824">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2823" id="button-2834" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2825" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2836">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2836">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2837">Lien de navigation nav-2837</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2838">Lien de navigation nav-2838</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2839">Lien de navigation nav-2839</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2840">Lien de navigation nav-2840</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2841">Lien de navigation nav-2841</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2842">Lien de navigation nav-2842</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2843">Lien de navigation nav-2843</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2844">Lien de navigation nav-2844</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2846">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2846">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2846" id="button-2982" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2847">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2848">Lien de navigation nav-2848</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2849">Lien de navigation nav-2849</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2850">Lien de navigation nav-2850</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2851">Lien de navigation nav-2851</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2852">Lien de navigation nav-2852</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2853">Lien de navigation nav-2853</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2854">Lien de navigation nav-2854</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2855">Lien de navigation nav-2855</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2856">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2857">Lien de navigation nav-2857</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2858">Lien de navigation nav-2858</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2859">Lien de navigation nav-2859</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2860">Lien de navigation nav-2860</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2861">Lien de navigation nav-2861</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2862">Lien de navigation nav-2862</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2863">Lien de navigation nav-2863</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2864">Lien de navigation nav-2864</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2865">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2866">Lien de navigation nav-2866</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2867">Lien de navigation nav-2867</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2868" aria-current="page">Lien de navigation nav-2868</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2869">Lien de navigation nav-2869</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2870">Lien de navigation nav-2870</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2871">Lien de navigation nav-2871</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2872">Lien de navigation nav-2872</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2873">Lien de navigation nav-2873</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2874">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2875">Lien de navigation nav-2875</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2876">Lien de navigation nav-2876</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2877">Lien de navigation nav-2877</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2878">Lien de navigation nav-2878</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2879">Lien de navigation nav-2879</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2880">Lien de navigation nav-2880</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2881">Lien de navigation nav-2881</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2882">Lien de navigation nav-2882</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2883">accès direct nav-2883</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2885" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2885">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2886">Lien de navigation nav-2886</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2887">Lien de navigation nav-2887</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2888" aria-current="page">Lien de navigation nav-2888</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2889">Lien de navigation nav-2889</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2890">Lien de navigation nav-2890</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2891">Lien de navigation nav-2891</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2892">Lien de navigation nav-2892</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2893">Lien de navigation nav-2893</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2895">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2895">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2895" id="button-2983" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-2896" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2897">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2898">Lien de navigation nav-2898</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2899">Lien de navigation nav-2899</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2900">Lien de navigation nav-2900</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2901">Lien de navigation nav-2901</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2902">Lien de navigation nav-2902</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2903">Lien de navigation nav-2903</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2904">Lien de navigation nav-2904</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2905">Lien de navigation nav-2905</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2906">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2907">Lien de navigation nav-2907</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2908">Lien de navigation nav-2908</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2909">Lien de navigation nav-2909</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2910">Lien de navigation nav-2910</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2911">Lien de navigation nav-2911</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2912">Lien de navigation nav-2912</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2913">Lien de navigation nav-2913</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2914">Lien de navigation nav-2914</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2915">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2916">Lien de navigation nav-2916</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2917">Lien de navigation nav-2917</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2918" aria-current="page">Lien de navigation nav-2918</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2919">Lien de navigation nav-2919</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2920">Lien de navigation nav-2920</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2921">Lien de navigation nav-2921</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2922">Lien de navigation nav-2922</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2923">Lien de navigation nav-2923</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2924">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2925">Lien de navigation nav-2925</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2926">Lien de navigation nav-2926</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2927">Lien de navigation nav-2927</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2928">Lien de navigation nav-2928</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2929">Lien de navigation nav-2929</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2930">Lien de navigation nav-2930</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2931">Lien de navigation nav-2931</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2932">Lien de navigation nav-2932</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-2933">accès direct nav-2933</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2935">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2935">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2935" id="button-2984" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2936">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2937">Lien de navigation nav-2937</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2938">Lien de navigation nav-2938</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2939">Lien de navigation nav-2939</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2940">Lien de navigation nav-2940</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2941">Lien de navigation nav-2941</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2942">Lien de navigation nav-2942</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2943">Lien de navigation nav-2943</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2944">Lien de navigation nav-2944</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2945">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2946">Lien de navigation nav-2946</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2947">Lien de navigation nav-2947</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2948">Lien de navigation nav-2948</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2949">Lien de navigation nav-2949</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2950">Lien de navigation nav-2950</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2951">Lien de navigation nav-2951</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2952">Lien de navigation nav-2952</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2953">Lien de navigation nav-2953</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2954">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2955">Lien de navigation nav-2955</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2956">Lien de navigation nav-2956</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2957" aria-current="page">Lien de navigation nav-2957</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2958">Lien de navigation nav-2958</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2959">Lien de navigation nav-2959</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2960">Lien de navigation nav-2960</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2961">Lien de navigation nav-2961</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2962">Lien de navigation nav-2962</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-2963">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2964">Lien de navigation nav-2964</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2965">Lien de navigation nav-2965</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2966">Lien de navigation nav-2966</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2967">Lien de navigation nav-2967</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2968">Lien de navigation nav-2968</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2969">Lien de navigation nav-2969</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2970">Lien de navigation nav-2970</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2971">Lien de navigation nav-2971</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2973">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2973">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-2974">Lien de navigation nav-2974</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2975">Lien de navigation nav-2975</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2976">Lien de navigation nav-2976</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2977">Lien de navigation nav-2977</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2978">Lien de navigation nav-2978</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2979">Lien de navigation nav-2979</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2980">Lien de navigation nav-2980</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-2981">Lien de navigation nav-2981</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 class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3153" aria-haspopup="menu" id="button-3154" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3156" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3157" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3158" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-3159">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn" aria-controls="translate-3152" aria-expanded="false" title="Sélectionner une langue" id="button-3160">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-3152">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-3161" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-3162">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-3163">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-3164">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-3165">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-3166">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3153" aria-labelledby="button-3154">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3153" id="button-3167" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3155" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3169">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3169">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3170">Lien de navigation nav-3170</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3171">Lien de navigation nav-3171</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3172">Lien de navigation nav-3172</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3173">Lien de navigation nav-3173</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3174">Lien de navigation nav-3174</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3175">Lien de navigation nav-3175</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3176">Lien de navigation nav-3176</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3177">Lien de navigation nav-3177</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3179">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3179">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-3179" id="button-3315" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3180">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3181">Lien de navigation nav-3181</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3182">Lien de navigation nav-3182</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3183">Lien de navigation nav-3183</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3184">Lien de navigation nav-3184</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3185">Lien de navigation nav-3185</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3186">Lien de navigation nav-3186</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3187">Lien de navigation nav-3187</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3188">Lien de navigation nav-3188</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3189">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3190">Lien de navigation nav-3190</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3191">Lien de navigation nav-3191</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3192">Lien de navigation nav-3192</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3193">Lien de navigation nav-3193</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3194">Lien de navigation nav-3194</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3195">Lien de navigation nav-3195</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3196">Lien de navigation nav-3196</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3197">Lien de navigation nav-3197</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3198">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3199">Lien de navigation nav-3199</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3200">Lien de navigation nav-3200</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3201" aria-current="page">Lien de navigation nav-3201</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3202">Lien de navigation nav-3202</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3203">Lien de navigation nav-3203</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3204">Lien de navigation nav-3204</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3205">Lien de navigation nav-3205</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3206">Lien de navigation nav-3206</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3207">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3208">Lien de navigation nav-3208</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3209">Lien de navigation nav-3209</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3210">Lien de navigation nav-3210</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3211">Lien de navigation nav-3211</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3212">Lien de navigation nav-3212</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3213">Lien de navigation nav-3213</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3214">Lien de navigation nav-3214</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3215">Lien de navigation nav-3215</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3216">accès direct nav-3216</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3218" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3218">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3219">Lien de navigation nav-3219</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3220">Lien de navigation nav-3220</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3221" aria-current="page">Lien de navigation nav-3221</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3222">Lien de navigation nav-3222</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3223">Lien de navigation nav-3223</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3224">Lien de navigation nav-3224</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3225">Lien de navigation nav-3225</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3226">Lien de navigation nav-3226</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3228">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3228">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-3228" id="button-3316" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3229" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3230">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3231">Lien de navigation nav-3231</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3232">Lien de navigation nav-3232</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3233">Lien de navigation nav-3233</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3234">Lien de navigation nav-3234</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3235">Lien de navigation nav-3235</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3236">Lien de navigation nav-3236</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3237">Lien de navigation nav-3237</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3238">Lien de navigation nav-3238</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3239">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3240">Lien de navigation nav-3240</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3241">Lien de navigation nav-3241</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3242">Lien de navigation nav-3242</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3243">Lien de navigation nav-3243</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3244">Lien de navigation nav-3244</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3245">Lien de navigation nav-3245</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3246">Lien de navigation nav-3246</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3247">Lien de navigation nav-3247</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3248">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3249">Lien de navigation nav-3249</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3250">Lien de navigation nav-3250</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3251" aria-current="page">Lien de navigation nav-3251</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3252">Lien de navigation nav-3252</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3253">Lien de navigation nav-3253</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3254">Lien de navigation nav-3254</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3255">Lien de navigation nav-3255</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3256">Lien de navigation nav-3256</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3257">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3258">Lien de navigation nav-3258</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3259">Lien de navigation nav-3259</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3260">Lien de navigation nav-3260</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3261">Lien de navigation nav-3261</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3262">Lien de navigation nav-3262</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3263">Lien de navigation nav-3263</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3264">Lien de navigation nav-3264</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3265">Lien de navigation nav-3265</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3266">accès direct nav-3266</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3268">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3268">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-3268" id="button-3317" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3269">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3270">Lien de navigation nav-3270</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3271">Lien de navigation nav-3271</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3272">Lien de navigation nav-3272</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3273">Lien de navigation nav-3273</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3274">Lien de navigation nav-3274</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3275">Lien de navigation nav-3275</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3276">Lien de navigation nav-3276</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3277">Lien de navigation nav-3277</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3278">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3279">Lien de navigation nav-3279</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3280">Lien de navigation nav-3280</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3281">Lien de navigation nav-3281</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3282">Lien de navigation nav-3282</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3283">Lien de navigation nav-3283</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3284">Lien de navigation nav-3284</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3285">Lien de navigation nav-3285</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3286">Lien de navigation nav-3286</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3287">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3288">Lien de navigation nav-3288</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3289">Lien de navigation nav-3289</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3290" aria-current="page">Lien de navigation nav-3290</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3291">Lien de navigation nav-3291</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3292">Lien de navigation nav-3292</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3293">Lien de navigation nav-3293</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3294">Lien de navigation nav-3294</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3295">Lien de navigation nav-3295</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3296">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3297">Lien de navigation nav-3297</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3298">Lien de navigation nav-3298</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3299">Lien de navigation nav-3299</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3300">Lien de navigation nav-3300</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3301">Lien de navigation nav-3301</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3302">Lien de navigation nav-3302</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3303">Lien de navigation nav-3303</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3304">Lien de navigation nav-3304</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3306">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3306">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3307">Lien de navigation nav-3307</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3308">Lien de navigation nav-3308</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3309">Lien de navigation nav-3309</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3310">Lien de navigation nav-3310</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3311">Lien de navigation nav-3311</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3312">Lien de navigation nav-3312</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3313">Lien de navigation nav-3313</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3314">Lien de navigation nav-3314</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec nom de service, lien d’accès
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3331" aria-haspopup="menu" id="button-3332" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3334" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3335" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3336" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3331" aria-labelledby="button-3332">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3331" id="button-3337" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3338" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3339">accès direct nav-3339</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3340">accès direct nav-3340</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3341">accès direct nav-3341</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3342">accès direct nav-3342</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec nom de service, recherche
Intitulé
officiel
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3360" id="button-3361" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3362" aria-haspopup="menu" id="button-3363" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-3360" aria-labelledby="button-3361">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3360" id="button-3365" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3359" role="search">
<label class="fr-label" for="search-3359-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3359-input-messages" placeholder="Rechercher" id="search-3359-input" type="search">
<div class="fr-messages-group" id="search-3359-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3367" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3362" aria-labelledby="button-3363">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3362" id="button-3368" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3369" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3370">accès direct nav-3370</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3371">accès direct nav-3371</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3372">accès direct nav-3372</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3373">accès direct nav-3373</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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3391" id="button-3392" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3393" aria-haspopup="menu" id="button-3394" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-3391" aria-labelledby="button-3392">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3391" id="button-3396" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3390" role="search">
<label class="fr-label" for="search-3390-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3390-input-messages" placeholder="Rechercher" id="search-3390-input" type="search">
<div class="fr-messages-group" id="search-3390-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3398" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3393" aria-labelledby="button-3394">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3393" id="button-3399" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3400" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3401">accès direct nav-3401</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3402">accès direct nav-3402</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3403">accès direct nav-3403</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3404">accès direct nav-3404</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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3425" id="button-3426" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3427" aria-haspopup="menu" id="button-3428" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3430" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3431" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3432" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3425" aria-labelledby="button-3426">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3425" id="button-3433" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3424" role="search">
<label class="fr-label" for="search-3424-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3424-input-messages" placeholder="Rechercher" id="search-3424-input" type="search">
<div class="fr-messages-group" id="search-3424-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3435" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3427" aria-labelledby="button-3428">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3427" id="button-3436" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3437" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3438">accès direct nav-3438</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3439">accès direct nav-3439</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3440">accès direct nav-3440</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3441">accès direct nav-3441</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec raccourcis dupliqués, pour Angular, React et Vue
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3449" aria-haspopup="menu" id="button-3450" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3451" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3452" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3453" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3449" aria-labelledby="button-3450">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3449" id="button-3454" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<ul class="fr-btns-group">
</ul>
</div>
</div>
</div>
</header>
Header avec bandeau BETA
Intitulé
officiel
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3475" id="button-3476" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3477" aria-haspopup="menu" id="button-3478" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3480" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3481" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3482" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3475" aria-labelledby="button-3476">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3475" id="button-3483" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3474" role="search">
<label class="fr-label" for="search-3474-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3474-input-messages" placeholder="Rechercher" id="search-3474-input" type="search">
<div class="fr-messages-group" id="search-3474-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3485" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3477" aria-labelledby="button-3478">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3477" id="button-3486" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3487" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3488">accès direct nav-3488</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3489">accès direct nav-3489</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3490">accès direct nav-3490</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3491">accès direct nav-3491</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 class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3512" id="button-3513" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3514" aria-haspopup="menu" id="button-3515" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn--team fr-btn" id="button-3517" href="#[url - à modifier]">
Contact
</a>
</li>
<li>
<a class="fr-btn--briefcase fr-btn" id="button-3518" href="#[url - à modifier]">
Espace recruteur
</a>
</li>
<li>
<a class="fr-btn--account fr-btn" id="button-3519" href="#[url - à modifier]">
Espace particulier
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3512" aria-labelledby="button-3513">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3512" id="button-3520" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3511" role="search">
<label class="fr-label" for="search-3511-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3511-input-messages" placeholder="Rechercher" id="search-3511-input" type="search">
<div class="fr-messages-group" id="search-3511-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3522" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3514" aria-labelledby="button-3515">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3514" id="button-3523" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3524" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3525">accès direct nav-3525</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3526">accès direct nav-3526</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3527">accès direct nav-3527</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3528">accès direct nav-3528</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header min avec bandeau BETA
BETA
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3539" aria-haspopup="menu" id="button-3540" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<p class="fr-header__service-title">
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3539" aria-labelledby="button-3540">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3539" id="button-3542" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3543" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3544">accès direct nav-3544</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3545">accès direct nav-3545</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3546">accès direct nav-3546</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3547">accès direct nav-3547</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Dépréciation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Header déprécié
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3711" id="button-3712" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3713" aria-haspopup="menu" id="button-3714" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - nom de l’entité (ministère, secrétariat d‘état, gouvernement)]">
<p class="fr-header__service-title">Nom du site / service</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-links-group">
<li>
<a class="fr-link fr-icon-add-circle-line" id="link-3716" href="[url - à modifier]">Créer un espace</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-3717" href="[url - à modifier]">Se connecter</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-3718" href="[url - à modifier]">S’enregistrer</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3711" aria-labelledby="button-3712">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-3711">Fermer</button>
<div class="fr-search-bar" id="search-3710" role="search">
<label class="fr-label" for="search-3710-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3710-input-messages" placeholder="Rechercher" id="search-3710-input" type="search">
<div class="fr-messages-group" id="search-3710-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3720" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3713" aria-labelledby="button-3714">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-3713">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3715" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3722">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3722">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3723">Lien de navigation nav-3723</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3724">Lien de navigation nav-3724</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3725">Lien de navigation nav-3725</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3726">Lien de navigation nav-3726</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3727">Lien de navigation nav-3727</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3728">Lien de navigation nav-3728</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3729">Lien de navigation nav-3729</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3730">Lien de navigation nav-3730</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3732">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3732">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-3732" id="button-3868" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3733">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3734">Lien de navigation nav-3734</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3735">Lien de navigation nav-3735</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3736">Lien de navigation nav-3736</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3737">Lien de navigation nav-3737</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3738">Lien de navigation nav-3738</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3739">Lien de navigation nav-3739</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3740">Lien de navigation nav-3740</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3741">Lien de navigation nav-3741</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3742">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3743">Lien de navigation nav-3743</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3744">Lien de navigation nav-3744</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3745">Lien de navigation nav-3745</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3746">Lien de navigation nav-3746</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3747">Lien de navigation nav-3747</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3748">Lien de navigation nav-3748</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3749">Lien de navigation nav-3749</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3750">Lien de navigation nav-3750</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3751">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3752">Lien de navigation nav-3752</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3753">Lien de navigation nav-3753</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3754" aria-current="page">Lien de navigation nav-3754</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3755">Lien de navigation nav-3755</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3756">Lien de navigation nav-3756</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3757">Lien de navigation nav-3757</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3758">Lien de navigation nav-3758</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3759">Lien de navigation nav-3759</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3760">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3761">Lien de navigation nav-3761</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3762">Lien de navigation nav-3762</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3763">Lien de navigation nav-3763</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3764">Lien de navigation nav-3764</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3765">Lien de navigation nav-3765</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3766">Lien de navigation nav-3766</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3767">Lien de navigation nav-3767</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3768">Lien de navigation nav-3768</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3769">accès direct nav-3769</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3771" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3771">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3772">Lien de navigation nav-3772</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3773">Lien de navigation nav-3773</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3774" aria-current="page">Lien de navigation nav-3774</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3775">Lien de navigation nav-3775</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3776">Lien de navigation nav-3776</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3777">Lien de navigation nav-3777</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3778">Lien de navigation nav-3778</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3779">Lien de navigation nav-3779</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3781">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3781">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-3781" id="button-3869" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3782" href="#">Voir toute la rubrique</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3783">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3784">Lien de navigation nav-3784</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3785">Lien de navigation nav-3785</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3786">Lien de navigation nav-3786</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3787">Lien de navigation nav-3787</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3788">Lien de navigation nav-3788</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3789">Lien de navigation nav-3789</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3790">Lien de navigation nav-3790</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3791">Lien de navigation nav-3791</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3792">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3793">Lien de navigation nav-3793</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3794">Lien de navigation nav-3794</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3795">Lien de navigation nav-3795</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3796">Lien de navigation nav-3796</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3797">Lien de navigation nav-3797</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3798">Lien de navigation nav-3798</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3799">Lien de navigation nav-3799</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3800">Lien de navigation nav-3800</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3801">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3802">Lien de navigation nav-3802</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3803">Lien de navigation nav-3803</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3804" aria-current="page">Lien de navigation nav-3804</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3805">Lien de navigation nav-3805</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3806">Lien de navigation nav-3806</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3807">Lien de navigation nav-3807</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3808">Lien de navigation nav-3808</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3809">Lien de navigation nav-3809</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3810">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3811">Lien de navigation nav-3811</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3812">Lien de navigation nav-3812</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3813">Lien de navigation nav-3813</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3814">Lien de navigation nav-3814</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3815">Lien de navigation nav-3815</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3816">Lien de navigation nav-3816</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3817">Lien de navigation nav-3817</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3818">Lien de navigation nav-3818</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" id="nav-3819">accès direct nav-3819</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3821">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3821">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-3821" id="button-3870" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3822">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3823">Lien de navigation nav-3823</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3824">Lien de navigation nav-3824</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3825">Lien de navigation nav-3825</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3826">Lien de navigation nav-3826</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3827">Lien de navigation nav-3827</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3828">Lien de navigation nav-3828</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3829">Lien de navigation nav-3829</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3830">Lien de navigation nav-3830</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3831">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3832">Lien de navigation nav-3832</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3833">Lien de navigation nav-3833</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3834">Lien de navigation nav-3834</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3835">Lien de navigation nav-3835</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3836">Lien de navigation nav-3836</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3837">Lien de navigation nav-3837</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3838">Lien de navigation nav-3838</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3839">Lien de navigation nav-3839</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3840">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3841">Lien de navigation nav-3841</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3842">Lien de navigation nav-3842</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3843" aria-current="page">Lien de navigation nav-3843</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3844">Lien de navigation nav-3844</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3845">Lien de navigation nav-3845</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3846">Lien de navigation nav-3846</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3847">Lien de navigation nav-3847</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3848">Lien de navigation nav-3848</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" id="category-3849">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3850">Lien de navigation nav-3850</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3851">Lien de navigation nav-3851</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3852">Lien de navigation nav-3852</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3853">Lien de navigation nav-3853</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3854">Lien de navigation nav-3854</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3855">Lien de navigation nav-3855</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3856">Lien de navigation nav-3856</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3857">Lien de navigation nav-3857</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3859">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3859">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" id="nav-3860">Lien de navigation nav-3860</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3861">Lien de navigation nav-3861</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3862">Lien de navigation nav-3862</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3863">Lien de navigation nav-3863</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3864">Lien de navigation nav-3864</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3865">Lien de navigation nav-3865</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3866">Lien de navigation nav-3866</a>
</li>
<li>
<a class="fr-nav__link" href="#" id="nav-3867">Lien de navigation nav-3867</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>