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-2377" id="button-2378" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2379" aria-haspopup="menu" id="button-2380" 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-2382" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2383" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2384" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2377" aria-labelledby="button-2378">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2377" id="button-2385" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2376" role="search">
<label class="fr-label" for="search-2376-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2376-input-messages" placeholder="Rechercher" id="search-2376-input" type="search">
<div class="fr-messages-group" id="search-2376-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2387" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2379" aria-labelledby="button-2380">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2379" id="button-2388" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2381" 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-2390">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2390">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2391">Lien de navigation nav-2391</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2392">Lien de navigation nav-2392</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2393">Lien de navigation nav-2393</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2394">Lien de navigation nav-2394</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2395">Lien de navigation nav-2395</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2396">Lien de navigation nav-2396</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2397">Lien de navigation nav-2397</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2398">Lien de navigation nav-2398</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2400">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2400">
<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-2400" id="button-2536" 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-2401">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2402">Lien de navigation nav-2402</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2403">Lien de navigation nav-2403</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2404">Lien de navigation nav-2404</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2405">Lien de navigation nav-2405</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2406">Lien de navigation nav-2406</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2407">Lien de navigation nav-2407</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2408">Lien de navigation nav-2408</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2409">Lien de navigation nav-2409</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-2410">Nom de catégorie</a>
</h5>
<ul class="fr-mega-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>
<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-2419">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2420">Lien de navigation nav-2420</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2421">Lien de navigation nav-2421</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2422" aria-current="page">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>
</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-2428">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2429">Lien de navigation nav-2429</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2430">Lien de navigation nav-2430</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2437">accès direct nav-2437</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2439" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2439">
<ul class="fr-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>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2449">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2449">
<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-2449" id="button-2537" 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-2450" 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-2451">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2457">Lien de navigation nav-2457</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2458">Lien de navigation nav-2458</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2459">Lien de navigation nav-2459</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-2460">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2468">Lien de navigation nav-2468</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-2469">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2470">Lien de navigation nav-2470</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2471">Lien de navigation nav-2471</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2472" aria-current="page">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>
</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-2478">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2479">Lien de navigation nav-2479</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2480">Lien de navigation nav-2480</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2487">accès direct nav-2487</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2489">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2489">
<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-2489" id="button-2538" 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-2490">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2498">Lien de navigation nav-2498</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-2499">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2507">Lien de navigation nav-2507</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-2508">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2509">Lien de navigation nav-2509</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2510">Lien de navigation nav-2510</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2511" aria-current="page">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>
</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-2517">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2518">Lien de navigation nav-2518</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2519">Lien de navigation nav-2519</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2527">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2527">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2528">Lien de navigation nav-2528</a>
</li>
<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">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>
</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-2549" aria-haspopup="menu" id="button-2550" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2549" aria-labelledby="button-2550">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2549" id="button-2552" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2553" 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-2554">accès direct nav-2554</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2555">accès direct nav-2555</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2556">accès direct nav-2556</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2557">accès direct nav-2557</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-2566" aria-haspopup="menu" id="button-2567" 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-2568" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2569" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2570" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2566" aria-labelledby="button-2567">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2566" id="button-2571" 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-2740" aria-haspopup="menu" id="button-2741" 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-2743" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2744" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2745" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-2746">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-2739" aria-expanded="false" title="Sélectionner une langue" id="button-2747">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2739">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2748" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2749">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2750">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2751">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2752">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2753">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2740" aria-labelledby="button-2741">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2740" id="button-2754" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2742" 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-2756">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2756">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2757">Lien de navigation nav-2757</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2758">Lien de navigation nav-2758</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2759">Lien de navigation nav-2759</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2760">Lien de navigation nav-2760</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2761">Lien de navigation nav-2761</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2762">Lien de navigation nav-2762</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2763">Lien de navigation nav-2763</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2764">Lien de navigation nav-2764</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2766">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2766">
<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-2766" id="button-2902" 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-2767">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2768">Lien de navigation nav-2768</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2769">Lien de navigation nav-2769</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2770">Lien de navigation nav-2770</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2771">Lien de navigation nav-2771</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2772">Lien de navigation nav-2772</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2773">Lien de navigation nav-2773</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2774">Lien de navigation nav-2774</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2775">Lien de navigation nav-2775</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-2776">Nom de catégorie</a>
</h5>
<ul class="fr-mega-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>
<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-2785">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2786">Lien de navigation nav-2786</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2787">Lien de navigation nav-2787</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2788" aria-current="page">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>
</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-2794">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2795">Lien de navigation nav-2795</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2796">Lien de navigation nav-2796</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2803">accès direct nav-2803</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2805" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2805">
<ul class="fr-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>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2815">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2815">
<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-2815" id="button-2903" 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-2816" 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-2817">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2823">Lien de navigation nav-2823</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2824">Lien de navigation nav-2824</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2825">Lien de navigation nav-2825</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-2826">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2834">Lien de navigation nav-2834</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-2835">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2836">Lien de navigation nav-2836</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2837">Lien de navigation nav-2837</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2838" aria-current="page">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>
</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-2844">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2845">Lien de navigation nav-2845</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2846">Lien de navigation nav-2846</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2853">accès direct nav-2853</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2855">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2855">
<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-2855" id="button-2904" 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-2856">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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">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>
<li>
<a class="fr-nav__link" href="#" target="_self" 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="#" target="_self" id="category-2865">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" 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="#" target="_self" id="category-2874">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2875">Lien de navigation nav-2875</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2876">Lien de navigation nav-2876</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2877" aria-current="page">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>
</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-2883">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2884">Lien de navigation nav-2884</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2885">Lien de navigation nav-2885</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2893">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2893">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2894">Lien de navigation nav-2894</a>
</li>
<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">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>
</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-2918" aria-haspopup="menu" id="button-2919" 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-2921" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2922" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2923" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2918" aria-labelledby="button-2919">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2918" id="button-2924" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2925" 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-2926">accès direct nav-2926</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2927">accès direct nav-2927</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2928">accès direct nav-2928</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2929">accès direct nav-2929</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-2947" id="button-2948" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2949" aria-haspopup="menu" id="button-2950" 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-2947" aria-labelledby="button-2948">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2947" id="button-2952" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2946" role="search">
<label class="fr-label" for="search-2946-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2946-input-messages" placeholder="Rechercher" id="search-2946-input" type="search">
<div class="fr-messages-group" id="search-2946-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2954" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2949" aria-labelledby="button-2950">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2949" id="button-2955" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2956" 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-2957">accès direct nav-2957</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2958">accès direct nav-2958</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2959">accès direct nav-2959</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2960">accès direct nav-2960</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-2978" id="button-2979" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2980" aria-haspopup="menu" id="button-2981" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-2978" aria-labelledby="button-2979">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2978" id="button-2983" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2977" role="search">
<label class="fr-label" for="search-2977-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2977-input-messages" placeholder="Rechercher" id="search-2977-input" type="search">
<div class="fr-messages-group" id="search-2977-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-2985" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2980" aria-labelledby="button-2981">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2980" id="button-2986" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2987" 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-2988">accès direct nav-2988</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2989">accès direct nav-2989</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2990">accès direct nav-2990</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2991">accès direct nav-2991</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-3012" id="button-3013" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3014" aria-haspopup="menu" id="button-3015" 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-3017" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3018" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3019" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3012" aria-labelledby="button-3013">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3012" id="button-3020" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3011" role="search">
<label class="fr-label" for="search-3011-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3011-input-messages" placeholder="Rechercher" id="search-3011-input" type="search">
<div class="fr-messages-group" id="search-3011-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3022" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3014" aria-labelledby="button-3015">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3014" id="button-3023" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3024" 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-3025">accès direct nav-3025</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3026">accès direct nav-3026</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3027">accès direct nav-3027</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3028">accès direct nav-3028</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-3036" aria-haspopup="menu" id="button-3037" 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-3038" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3039" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3040" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3036" aria-labelledby="button-3037">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3036" id="button-3041" 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-3062" id="button-3063" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3064" aria-haspopup="menu" id="button-3065" 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-3067" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3068" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3069" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3062" aria-labelledby="button-3063">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3062" id="button-3070" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3061" role="search">
<label class="fr-label" for="search-3061-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3061-input-messages" placeholder="Rechercher" id="search-3061-input" type="search">
<div class="fr-messages-group" id="search-3061-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3072" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3064" aria-labelledby="button-3065">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3064" id="button-3073" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3074" 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-3075">accès direct nav-3075</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3076">accès direct nav-3076</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3077">accès direct nav-3077</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3078">accès direct nav-3078</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-3099" id="button-3100" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3101" aria-haspopup="menu" id="button-3102" 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-3104" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-3105" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-3106" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3099" aria-labelledby="button-3100">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-3099" id="button-3107" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-3098" role="search">
<label class="fr-label" for="search-3098-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3098-input-messages" placeholder="Rechercher" id="search-3098-input" type="search">
<div class="fr-messages-group" id="search-3098-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3109" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3101" aria-labelledby="button-3102">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3101" id="button-3110" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3111" 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-3112">accès direct nav-3112</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3113">accès direct nav-3113</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3114">accès direct nav-3114</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3115">accès direct nav-3115</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-3126" aria-haspopup="menu" id="button-3127" 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-3126" aria-labelledby="button-3127">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-3126" id="button-3129" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3130" 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-3131">accès direct nav-3131</a>
</li>
<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>
</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-3298" id="button-3299" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-3300" aria-haspopup="menu" id="button-3301" 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-3303" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-3304" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-3305" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-3298" aria-labelledby="button-3299">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-3298">Fermer</button>
<div class="fr-search-bar" id="search-3297" role="search">
<label class="fr-label" for="search-3297-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-3297-input-messages" placeholder="Rechercher" id="search-3297-input" type="search">
<div class="fr-messages-group" id="search-3297-input-messages" aria-live="polite">
</div>
<button class="fr-btn" id="search-btn-3307" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-3300" aria-labelledby="button-3301">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-3300">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-3302" 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-3309">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3309">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3310">Lien de navigation nav-3310</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3311">Lien de navigation nav-3311</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3312">Lien de navigation nav-3312</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3313">Lien de navigation nav-3313</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3314">Lien de navigation nav-3314</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3315">Lien de navigation nav-3315</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3316">Lien de navigation nav-3316</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3317">Lien de navigation nav-3317</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3319">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3319">
<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-3319" id="button-3455" 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-3320">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3321">Lien de navigation nav-3321</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3322">Lien de navigation nav-3322</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3323">Lien de navigation nav-3323</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3324">Lien de navigation nav-3324</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3325">Lien de navigation nav-3325</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3326">Lien de navigation nav-3326</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3327">Lien de navigation nav-3327</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3328">Lien de navigation nav-3328</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-3329">Nom de catégorie</a>
</h5>
<ul class="fr-mega-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>
<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-3338">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3339">Lien de navigation nav-3339</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3340">Lien de navigation nav-3340</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3341" aria-current="page">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>
</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-3347">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3348">Lien de navigation nav-3348</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3349">Lien de navigation nav-3349</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3356">accès direct nav-3356</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3358" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3358">
<ul class="fr-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>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3368">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3368">
<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-3368" id="button-3456" 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-3369" 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-3370">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3376">Lien de navigation nav-3376</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3377">Lien de navigation nav-3377</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3378">Lien de navigation nav-3378</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-3379">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3387">Lien de navigation nav-3387</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-3388">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3389">Lien de navigation nav-3389</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3390">Lien de navigation nav-3390</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3391" aria-current="page">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>
</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-3397">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3398">Lien de navigation nav-3398</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3399">Lien de navigation nav-3399</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-3406">accès direct nav-3406</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3408">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-3408">
<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-3408" id="button-3457" 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-3409">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3417">Lien de navigation nav-3417</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3418">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3426">Lien de navigation nav-3426</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-lg-3">
<h5 class="fr-mega-menu__category">
<a class="fr-nav__link" href="#" target="_self" id="category-3427">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3428">Lien de navigation nav-3428</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3429">Lien de navigation nav-3429</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3430" aria-current="page">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>
</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-3436">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3437">Lien de navigation nav-3437</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3438">Lien de navigation nav-3438</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-3446">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-3446">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-3447">Lien de navigation nav-3447</a>
</li>
<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">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>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>