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-2397" id="button-2398" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2399" aria-haspopup="menu" id="button-2400" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-2402" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2403" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2404" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2397" aria-labelledby="button-2398">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2397" id="button-2405" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2396" role="search">
<label class="fr-label" for="search-2396-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2396-input-messages" placeholder="Rechercher" id="search-2396-input" type="search">
<div class="fr-messages-group" id="search-2396-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2407" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2399" aria-labelledby="button-2400">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2399" id="button-2408" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2401" 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-2410">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2410">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2411">Lien de navigation nav-2411</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2412">Lien de navigation nav-2412</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2413">Lien de navigation nav-2413</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2414">Lien de navigation nav-2414</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2415">Lien de navigation nav-2415</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2416">Lien de navigation nav-2416</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2417">Lien de navigation nav-2417</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2418">Lien de navigation nav-2418</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2420">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2420">
<div class="fr-container fr-container--fluid fr-container-lg">
<div class="fr-grid-row fr-grid-row-lg--gutters">
<div class="fr-col-12 fr-mb-n3v">
<button class="fr-btn--close fr-btn" aria-controls="collapse-2420" id="button-2556" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2421">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2422">Lien de navigation nav-2422</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2423">Lien de navigation nav-2423</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2424">Lien de navigation nav-2424</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2425">Lien de navigation nav-2425</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2426">Lien de navigation nav-2426</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2427">Lien de navigation nav-2427</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2428">Lien de navigation nav-2428</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2429">Lien de navigation nav-2429</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2430">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2431">Lien de navigation nav-2431</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2432">Lien de navigation nav-2432</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2433">Lien de navigation nav-2433</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2434">Lien de navigation nav-2434</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2435">Lien de navigation nav-2435</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2436">Lien de navigation nav-2436</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2437">Lien de navigation nav-2437</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2438">Lien de navigation nav-2438</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2439">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2440">Lien de navigation nav-2440</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2441">Lien de navigation nav-2441</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2442" aria-current="page">Lien de navigation nav-2442</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2443">Lien de navigation nav-2443</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2444">Lien de navigation nav-2444</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2445">Lien de navigation nav-2445</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2446">Lien de navigation nav-2446</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2447">Lien de navigation nav-2447</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2448">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2449">Lien de navigation nav-2449</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2450">Lien de navigation nav-2450</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2451">Lien de navigation nav-2451</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2452">Lien de navigation nav-2452</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2453">Lien de navigation nav-2453</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2454">Lien de navigation nav-2454</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2455">Lien de navigation nav-2455</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2456">Lien de navigation nav-2456</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2457">accès direct nav-2457</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2459" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2459">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2460">Lien de navigation nav-2460</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2461">Lien de navigation nav-2461</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2462" aria-current="page">Lien de navigation nav-2462</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2463">Lien de navigation nav-2463</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2464">Lien de navigation nav-2464</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2465">Lien de navigation nav-2465</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2466">Lien de navigation nav-2466</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2467">Lien de navigation nav-2467</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2469">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2469">
<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-2469" id="button-2557" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-2470" href="#">
Voir toute la rubrique
</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2471">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2472">Lien de navigation nav-2472</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2473">Lien de navigation nav-2473</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2474">Lien de navigation nav-2474</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2475">Lien de navigation nav-2475</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2476">Lien de navigation nav-2476</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2477">Lien de navigation nav-2477</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2478">Lien de navigation nav-2478</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2479">Lien de navigation nav-2479</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2480">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2481">Lien de navigation nav-2481</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2482">Lien de navigation nav-2482</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2483">Lien de navigation nav-2483</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2484">Lien de navigation nav-2484</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2485">Lien de navigation nav-2485</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2486">Lien de navigation nav-2486</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2487">Lien de navigation nav-2487</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2488">Lien de navigation nav-2488</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2489">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2490">Lien de navigation nav-2490</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2491">Lien de navigation nav-2491</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2492" aria-current="page">Lien de navigation nav-2492</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2493">Lien de navigation nav-2493</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2494">Lien de navigation nav-2494</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2495">Lien de navigation nav-2495</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2496">Lien de navigation nav-2496</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2497">Lien de navigation nav-2497</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2498">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2499">Lien de navigation nav-2499</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2500">Lien de navigation nav-2500</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2501">Lien de navigation nav-2501</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2502">Lien de navigation nav-2502</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2503">Lien de navigation nav-2503</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2504">Lien de navigation nav-2504</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2505">Lien de navigation nav-2505</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2506">Lien de navigation nav-2506</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2507">accès direct nav-2507</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2509">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2509">
<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-2509" id="button-2558" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2510">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2511">Lien de navigation nav-2511</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2512">Lien de navigation nav-2512</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2513">Lien de navigation nav-2513</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2514">Lien de navigation nav-2514</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2515">Lien de navigation nav-2515</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2516">Lien de navigation nav-2516</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2517">Lien de navigation nav-2517</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2518">Lien de navigation nav-2518</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2519">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2520">Lien de navigation nav-2520</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2521">Lien de navigation nav-2521</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2522">Lien de navigation nav-2522</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2523">Lien de navigation nav-2523</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2524">Lien de navigation nav-2524</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2525">Lien de navigation nav-2525</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2526">Lien de navigation nav-2526</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2527">Lien de navigation nav-2527</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2528">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2529">Lien de navigation nav-2529</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2530">Lien de navigation nav-2530</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2531" aria-current="page">Lien de navigation nav-2531</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2532">Lien de navigation nav-2532</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2533">Lien de navigation nav-2533</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2534">Lien de navigation nav-2534</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2535">Lien de navigation nav-2535</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2536">Lien de navigation nav-2536</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2537">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2538">Lien de navigation nav-2538</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2539">Lien de navigation nav-2539</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2540">Lien de navigation nav-2540</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2541">Lien de navigation nav-2541</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2542">Lien de navigation nav-2542</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2543">Lien de navigation nav-2543</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2544">Lien de navigation nav-2544</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2545">Lien de navigation nav-2545</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2547">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2547">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2548">Lien de navigation nav-2548</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2549">Lien de navigation nav-2549</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2550">Lien de navigation nav-2550</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2551">Lien de navigation nav-2551</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2552">Lien de navigation nav-2552</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2553">Lien de navigation nav-2553</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2554">Lien de navigation nav-2554</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2555">Lien de navigation nav-2555</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header minimal
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2569" aria-haspopup="menu" id="button-2570" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2569" aria-labelledby="button-2570">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2569" id="button-2572" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2573" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2574">accès direct nav-2574</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2575">accès direct nav-2575</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2576">accès direct nav-2576</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2577">accès direct nav-2577</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header sans navigation
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
</div>
</div>
</div>
</header>
Header sans navigation avec raccourcis
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2586" aria-haspopup="menu" id="button-2587" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-2588" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2589" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2590" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2586" aria-labelledby="button-2587">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2586" id="button-2591" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
</div>
</div>
</header>
Header avec selecteur de langues
Intitulé
officiel
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2760" aria-haspopup="menu" id="button-2761" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-2763" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2764" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2765" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-2766">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-2759" aria-expanded="false" title="Sélectionner une langue" id="button-2767">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2759">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2768" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2769">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2770">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2771">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2772">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2773">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2760" aria-labelledby="button-2761">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2760" id="button-2774" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2762" 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-2776">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2776">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2777">Lien de navigation nav-2777</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2778">Lien de navigation nav-2778</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2779">Lien de navigation nav-2779</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2780">Lien de navigation nav-2780</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2781">Lien de navigation nav-2781</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2782">Lien de navigation nav-2782</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2783">Lien de navigation nav-2783</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2784">Lien de navigation nav-2784</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2786">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2786">
<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-2786" id="button-2922" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2787">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2788">Lien de navigation nav-2788</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2789">Lien de navigation nav-2789</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2790">Lien de navigation nav-2790</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2791">Lien de navigation nav-2791</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2792">Lien de navigation nav-2792</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2793">Lien de navigation nav-2793</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2794">Lien de navigation nav-2794</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2795">Lien de navigation nav-2795</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2796">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2797">Lien de navigation nav-2797</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2798">Lien de navigation nav-2798</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2799">Lien de navigation nav-2799</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2800">Lien de navigation nav-2800</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2801">Lien de navigation nav-2801</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2802">Lien de navigation nav-2802</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2803">Lien de navigation nav-2803</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2804">Lien de navigation nav-2804</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2805">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2806">Lien de navigation nav-2806</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2807">Lien de navigation nav-2807</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2808" aria-current="page">Lien de navigation nav-2808</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2809">Lien de navigation nav-2809</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2810">Lien de navigation nav-2810</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2811">Lien de navigation nav-2811</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2812">Lien de navigation nav-2812</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2813">Lien de navigation nav-2813</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2814">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2815">Lien de navigation nav-2815</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2816">Lien de navigation nav-2816</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2817">Lien de navigation nav-2817</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2818">Lien de navigation nav-2818</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2819">Lien de navigation nav-2819</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2820">Lien de navigation nav-2820</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2821">Lien de navigation nav-2821</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2822">Lien de navigation nav-2822</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2823">accès direct nav-2823</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2825" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2825">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2826">Lien de navigation nav-2826</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2827">Lien de navigation nav-2827</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2828" aria-current="page">Lien de navigation nav-2828</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2829">Lien de navigation nav-2829</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2830">Lien de navigation nav-2830</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2831">Lien de navigation nav-2831</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2832">Lien de navigation nav-2832</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2833">Lien de navigation nav-2833</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2835">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2835">
<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-2835" id="button-2923" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-2836" href="#">
Voir toute la rubrique
</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2837">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2838">Lien de navigation nav-2838</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2839">Lien de navigation nav-2839</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2840">Lien de navigation nav-2840</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2841">Lien de navigation nav-2841</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2842">Lien de navigation nav-2842</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2843">Lien de navigation nav-2843</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2844">Lien de navigation nav-2844</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2845">Lien de navigation nav-2845</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2846">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2847">Lien de navigation nav-2847</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2848">Lien de navigation nav-2848</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2849">Lien de navigation nav-2849</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2850">Lien de navigation nav-2850</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2851">Lien de navigation nav-2851</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2852">Lien de navigation nav-2852</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2853">Lien de navigation nav-2853</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2854">Lien de navigation nav-2854</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2855">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2856">Lien de navigation nav-2856</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2857">Lien de navigation nav-2857</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2858" aria-current="page">Lien de navigation nav-2858</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2859">Lien de navigation nav-2859</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2860">Lien de navigation nav-2860</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2861">Lien de navigation nav-2861</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2862">Lien de navigation nav-2862</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2863">Lien de navigation nav-2863</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2864">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2865">Lien de navigation nav-2865</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2866">Lien de navigation nav-2866</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2867">Lien de navigation nav-2867</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2868">Lien de navigation nav-2868</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2869">Lien de navigation nav-2869</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2870">Lien de navigation nav-2870</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2871">Lien de navigation nav-2871</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2872">Lien de navigation nav-2872</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2873">accès direct nav-2873</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2875">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2875">
<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-2875" id="button-2924" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2876">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2877">Lien de navigation nav-2877</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2878">Lien de navigation nav-2878</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2879">Lien de navigation nav-2879</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2880">Lien de navigation nav-2880</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2881">Lien de navigation nav-2881</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2882">Lien de navigation nav-2882</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2883">Lien de navigation nav-2883</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2884">Lien de navigation nav-2884</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2885">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2886">Lien de navigation nav-2886</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2887">Lien de navigation nav-2887</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2888">Lien de navigation nav-2888</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2889">Lien de navigation nav-2889</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2890">Lien de navigation nav-2890</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2891">Lien de navigation nav-2891</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2892">Lien de navigation nav-2892</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2893">Lien de navigation nav-2893</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2894">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2895">Lien de navigation nav-2895</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2896">Lien de navigation nav-2896</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2897" aria-current="page">Lien de navigation nav-2897</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2898">Lien de navigation nav-2898</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2899">Lien de navigation nav-2899</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2900">Lien de navigation nav-2900</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2901">Lien de navigation nav-2901</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2902">Lien de navigation nav-2902</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-2903">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2904">Lien de navigation nav-2904</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2905">Lien de navigation nav-2905</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2906">Lien de navigation nav-2906</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2907">Lien de navigation nav-2907</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2908">Lien de navigation nav-2908</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2909">Lien de navigation nav-2909</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2910">Lien de navigation nav-2910</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2911">Lien de navigation nav-2911</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2913">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2913">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2914">Lien de navigation nav-2914</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2915">Lien de navigation nav-2915</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2916">Lien de navigation nav-2916</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2917">Lien de navigation nav-2917</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2918">Lien de navigation nav-2918</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2919">Lien de navigation nav-2919</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2920">Lien de navigation nav-2920</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2921">Lien de navigation nav-2921</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-2938" aria-haspopup="menu" id="button-2939" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-2941" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2942" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2943" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2938" aria-labelledby="button-2939">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2938" id="button-2944" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2945" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2946">accès direct nav-2946</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2947">accès direct nav-2947</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2948">accès direct nav-2948</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2949">accès direct nav-2949</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-2967" id="button-2968" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2969" aria-haspopup="menu" id="button-2970" 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-2967" aria-labelledby="button-2968">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2967" id="button-2972" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2966" role="search">
<label class="fr-label" for="search-2966-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2966-input-messages" placeholder="Rechercher" id="search-2966-input" type="search">
<div class="fr-messages-group" id="search-2966-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2974" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2969" aria-labelledby="button-2970">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2969" id="button-2975" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2976" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2977">accès direct nav-2977</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2978">accès direct nav-2978</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2979">accès direct nav-2979</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2980">accès direct nav-2980</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec opérateur vertical, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.9x16.png)
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<a href="/" title="Accueil - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<img class="fr-responsive-img" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-2998" id="button-2999" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3000" aria-haspopup="menu" id="button-3001" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-2998" aria-labelledby="button-2999">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2998" id="button-3003" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2997" role="search">
<label class="fr-label" for="search-2997-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2997-input-messages" placeholder="Rechercher" id="search-2997-input" type="search">
<div class="fr-messages-group" id="search-2997-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3005" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3000" aria-labelledby="button-3001">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3000" id="button-3006" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3007" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3008">accès direct nav-3008</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3009">accès direct nav-3009</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3010">accès direct nav-3010</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3011">accès direct nav-3011</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header avec opérateur horizontal, nom de service, lien d’accès, recherche
République
Française
![[À MODIFIER - texte alternatif de l’image]](../../../example/img/placeholder.16x9.png)
Nom du site / service
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<img class="fr-responsive-img" style="max-width:9.0625rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3032" id="button-3033" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3034" aria-haspopup="menu" id="button-3035" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-3037" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3038" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3039" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3032" aria-labelledby="button-3033">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3032" id="button-3040" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3031" role="search">
<label class="fr-label" for="search-3031-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3031-input-messages" placeholder="Rechercher" id="search-3031-input" type="search">
<div class="fr-messages-group" id="search-3031-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3042" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3034" aria-labelledby="button-3035">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3034" id="button-3043" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3044" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3045">accès direct nav-3045</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3046">accès direct nav-3046</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3047">accès direct nav-3047</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3048">accès direct nav-3048</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-3056" aria-haspopup="menu" id="button-3057" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-3058" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3059" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3060" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3056" aria-labelledby="button-3057">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3056" id="button-3061" 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-3082" id="button-3083" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3084" aria-haspopup="menu" id="button-3085" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-3087" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3088" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3089" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3082" aria-labelledby="button-3083">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3082" id="button-3090" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3081" role="search">
<label class="fr-label" for="search-3081-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3081-input-messages" placeholder="Rechercher" id="search-3081-input" type="search">
<div class="fr-messages-group" id="search-3081-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3092" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3084" aria-labelledby="button-3085">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3084" id="button-3093" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3094" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3095">accès direct nav-3095</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3096">accès direct nav-3096</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3097">accès direct nav-3097</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3098">accès direct nav-3098</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
Header logo opérateur + bandeau BETA
République
Française
Nom du site / service BETA
baseline - précisions sur l‘organisation
<header role="banner" class="fr-header">
<div class="fr-header__body">
<div class="fr-container">
<div class="fr-header__body-row">
<div class="fr-header__brand fr-enlarge-link">
<div class="fr-header__brand-top">
<div class="fr-header__logo">
<p class="fr-logo">
République
<br>Française
</p>
</div>
<div class="fr-header__operator">
<img class="fr-responsive-img" style="max-width:9.0625rem;" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-3119" id="button-3120" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3121" aria-haspopup="menu" id="button-3122" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - [À MODIFIER - Nom du site / service] - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<p class="fr-header__service-title">
Nom du site / service
<span class="fr-badge fr-badge--sm fr-badge--green-emeraude">BETA</span>
</p>
</a>
<p class="fr-header__service-tagline">baseline - précisions sur l‘organisation</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a class="fr-btn fr-icon-add-circle-line" id="button-3124" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3125" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3126" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3119" aria-labelledby="button-3120">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3119" id="button-3127" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3118" role="search">
<label class="fr-label" for="search-3118-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3118-input-messages" placeholder="Rechercher" id="search-3118-input" type="search">
<div class="fr-messages-group" id="search-3118-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3129" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3121" aria-labelledby="button-3122">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3121" id="button-3130" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3131" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3132">accès direct nav-3132</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3133">accès direct nav-3133</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3134">accès direct nav-3134</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3135">accès direct nav-3135</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-3146" aria-haspopup="menu" id="button-3147" 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-3146" aria-labelledby="button-3147">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3146" id="button-3149" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3150" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3151">accès direct nav-3151</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3152">accès direct nav-3152</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3153">accès direct nav-3153</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3154">accès direct nav-3154</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-3318" id="button-3319" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3320" aria-haspopup="menu" id="button-3321" 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-3323" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-3324" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-3325" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3318" aria-labelledby="button-3319">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-3318">Fermer</button>
<div class="fr-search-bar" id="search-3317" role="search">
<label class="fr-label" for="search-3317-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3317-input-messages" placeholder="Rechercher" id="search-3317-input" type="search">
<div class="fr-messages-group" id="search-3317-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3327" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3320" aria-labelledby="button-3321">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-3320">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3322" 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-3329">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3329">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3330">Lien de navigation nav-3330</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3331">Lien de navigation nav-3331</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3332">Lien de navigation nav-3332</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3333">Lien de navigation nav-3333</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3334">Lien de navigation nav-3334</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3335">Lien de navigation nav-3335</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3336">Lien de navigation nav-3336</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3337">Lien de navigation nav-3337</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3339">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3339">
<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-3339" id="button-3475" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3340">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3341">Lien de navigation nav-3341</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3342">Lien de navigation nav-3342</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3343">Lien de navigation nav-3343</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3344">Lien de navigation nav-3344</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3345">Lien de navigation nav-3345</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3346">Lien de navigation nav-3346</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3347">Lien de navigation nav-3347</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3348">Lien de navigation nav-3348</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3349">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3350">Lien de navigation nav-3350</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3351">Lien de navigation nav-3351</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3352">Lien de navigation nav-3352</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3353">Lien de navigation nav-3353</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3354">Lien de navigation nav-3354</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3355">Lien de navigation nav-3355</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3356">Lien de navigation nav-3356</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3357">Lien de navigation nav-3357</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3358">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3359">Lien de navigation nav-3359</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3360">Lien de navigation nav-3360</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3361" aria-current="page">Lien de navigation nav-3361</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3362">Lien de navigation nav-3362</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3363">Lien de navigation nav-3363</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3364">Lien de navigation nav-3364</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3365">Lien de navigation nav-3365</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3366">Lien de navigation nav-3366</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3367">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3368">Lien de navigation nav-3368</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3369">Lien de navigation nav-3369</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3370">Lien de navigation nav-3370</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3371">Lien de navigation nav-3371</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3372">Lien de navigation nav-3372</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3373">Lien de navigation nav-3373</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3374">Lien de navigation nav-3374</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3375">Lien de navigation nav-3375</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3376">accès direct nav-3376</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3378" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3378">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3379">Lien de navigation nav-3379</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3380">Lien de navigation nav-3380</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3381" aria-current="page">Lien de navigation nav-3381</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3382">Lien de navigation nav-3382</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3383">Lien de navigation nav-3383</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3384">Lien de navigation nav-3384</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3385">Lien de navigation nav-3385</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3386">Lien de navigation nav-3386</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3388">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3388">
<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-3388" id="button-3476" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
<div class="fr-mega-menu__leader">
<h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4>
<p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3389" href="#">
Voir toute la rubrique
</a>
</div>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3390">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3391">Lien de navigation nav-3391</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3392">Lien de navigation nav-3392</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3393">Lien de navigation nav-3393</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3394">Lien de navigation nav-3394</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3395">Lien de navigation nav-3395</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3396">Lien de navigation nav-3396</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3397">Lien de navigation nav-3397</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3398">Lien de navigation nav-3398</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3399">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3400">Lien de navigation nav-3400</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3401">Lien de navigation nav-3401</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3402">Lien de navigation nav-3402</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3403">Lien de navigation nav-3403</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3404">Lien de navigation nav-3404</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3405">Lien de navigation nav-3405</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3406">Lien de navigation nav-3406</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3407">Lien de navigation nav-3407</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3408">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3409">Lien de navigation nav-3409</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3410">Lien de navigation nav-3410</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3411" aria-current="page">Lien de navigation nav-3411</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3412">Lien de navigation nav-3412</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3413">Lien de navigation nav-3413</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3414">Lien de navigation nav-3414</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3415">Lien de navigation nav-3415</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3416">Lien de navigation nav-3416</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3417">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3418">Lien de navigation nav-3418</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3419">Lien de navigation nav-3419</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3420">Lien de navigation nav-3420</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3421">Lien de navigation nav-3421</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3422">Lien de navigation nav-3422</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3423">Lien de navigation nav-3423</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3424">Lien de navigation nav-3424</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3425">Lien de navigation nav-3425</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3426">accès direct nav-3426</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3428">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3428">
<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-3428" id="button-3477" title="Fermer">
Fermer
</button>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3429">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3430">Lien de navigation nav-3430</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3431">Lien de navigation nav-3431</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3432">Lien de navigation nav-3432</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3433">Lien de navigation nav-3433</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3434">Lien de navigation nav-3434</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3435">Lien de navigation nav-3435</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3436">Lien de navigation nav-3436</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3437">Lien de navigation nav-3437</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3438">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3439">Lien de navigation nav-3439</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3440">Lien de navigation nav-3440</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3441">Lien de navigation nav-3441</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3442">Lien de navigation nav-3442</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3443">Lien de navigation nav-3443</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3444">Lien de navigation nav-3444</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3445">Lien de navigation nav-3445</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3446">Lien de navigation nav-3446</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3447">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3448">Lien de navigation nav-3448</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3449">Lien de navigation nav-3449</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3450" aria-current="page">Lien de navigation nav-3450</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3451">Lien de navigation nav-3451</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3452">Lien de navigation nav-3452</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3453">Lien de navigation nav-3453</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3454">Lien de navigation nav-3454</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3455">Lien de navigation nav-3455</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3456">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3457">Lien de navigation nav-3457</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3458">Lien de navigation nav-3458</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3459">Lien de navigation nav-3459</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3460">Lien de navigation nav-3460</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3461">Lien de navigation nav-3461</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3462">Lien de navigation nav-3462</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3463">Lien de navigation nav-3463</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3464">Lien de navigation nav-3464</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3466">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3466">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3467">Lien de navigation nav-3467</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3468">Lien de navigation nav-3468</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3469">Lien de navigation nav-3469</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3470">Lien de navigation nav-3470</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3471">Lien de navigation nav-3471</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3472">Lien de navigation nav-3472</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3473">Lien de navigation nav-3473</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3474">Lien de navigation nav-3474</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>