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-1755" id="button-1756" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1757" aria-haspopup="menu" id="button-1758" 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-1760" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-1761" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-1762" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1755">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1755" id="button-1763" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1754" role="search">
<label class="fr-label" for="search-1754-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1754-input-messages" placeholder="Rechercher" id="search-1754-input" type="search">
<div class="fr-messages-group" id="search-1754-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1765" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1757" aria-labelledby="button-1758">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1757" id="button-1766" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1759" 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-1768">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1768">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1769">Lien de navigation nav-1769</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1770">Lien de navigation nav-1770</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1771">Lien de navigation nav-1771</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1772">Lien de navigation nav-1772</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1773">Lien de navigation nav-1773</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1774">Lien de navigation nav-1774</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1775">Lien de navigation nav-1775</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1776">Lien de navigation nav-1776</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1778">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1778">
<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-1778" id="button-1914" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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-1779">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1780">Lien de navigation nav-1780</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1781">Lien de navigation nav-1781</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1782">Lien de navigation nav-1782</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1783">Lien de navigation nav-1783</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1784">Lien de navigation nav-1784</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1785">Lien de navigation nav-1785</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1786">Lien de navigation nav-1786</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1787">Lien de navigation nav-1787</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-1788">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1789">Lien de navigation nav-1789</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1790">Lien de navigation nav-1790</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1791">Lien de navigation nav-1791</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1792">Lien de navigation nav-1792</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1793">Lien de navigation nav-1793</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1794">Lien de navigation nav-1794</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1795">Lien de navigation nav-1795</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1796">Lien de navigation nav-1796</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-1797">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1798">Lien de navigation nav-1798</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1799">Lien de navigation nav-1799</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1800" aria-current="page">Lien de navigation nav-1800</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1801">Lien de navigation nav-1801</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1802">Lien de navigation nav-1802</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1803">Lien de navigation nav-1803</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1804">Lien de navigation nav-1804</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1805">Lien de navigation nav-1805</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-1806">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1807">Lien de navigation nav-1807</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1808">Lien de navigation nav-1808</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1809">Lien de navigation nav-1809</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1810">Lien de navigation nav-1810</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1811">Lien de navigation nav-1811</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1812">Lien de navigation nav-1812</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1813">Lien de navigation nav-1813</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1814">Lien de navigation nav-1814</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1815">accès direct nav-1815</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1817" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1817">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1818">Lien de navigation nav-1818</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1819">Lien de navigation nav-1819</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1820" aria-current="page">Lien de navigation nav-1820</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1821">Lien de navigation nav-1821</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1822">Lien de navigation nav-1822</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1823">Lien de navigation nav-1823</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1824">Lien de navigation nav-1824</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1825">Lien de navigation nav-1825</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1827">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1827">
<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-1827" id="button-1915" 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-1828" 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-1829">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1830">Lien de navigation nav-1830</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1831">Lien de navigation nav-1831</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1832">Lien de navigation nav-1832</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1833">Lien de navigation nav-1833</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1834">Lien de navigation nav-1834</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1835">Lien de navigation nav-1835</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1836">Lien de navigation nav-1836</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1837">Lien de navigation nav-1837</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-1838">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1839">Lien de navigation nav-1839</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1840">Lien de navigation nav-1840</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1841">Lien de navigation nav-1841</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1842">Lien de navigation nav-1842</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1843">Lien de navigation nav-1843</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1844">Lien de navigation nav-1844</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1845">Lien de navigation nav-1845</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1846">Lien de navigation nav-1846</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-1847">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1848">Lien de navigation nav-1848</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1849">Lien de navigation nav-1849</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1850" aria-current="page">Lien de navigation nav-1850</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1851">Lien de navigation nav-1851</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1852">Lien de navigation nav-1852</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1853">Lien de navigation nav-1853</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1854">Lien de navigation nav-1854</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1855">Lien de navigation nav-1855</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-1856">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1857">Lien de navigation nav-1857</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1858">Lien de navigation nav-1858</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1859">Lien de navigation nav-1859</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1860">Lien de navigation nav-1860</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1861">Lien de navigation nav-1861</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1862">Lien de navigation nav-1862</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1863">Lien de navigation nav-1863</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1864">Lien de navigation nav-1864</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1865">accès direct nav-1865</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1867">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1867">
<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-1867" id="button-1916" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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-1868">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1869">Lien de navigation nav-1869</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1870">Lien de navigation nav-1870</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1871">Lien de navigation nav-1871</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1872">Lien de navigation nav-1872</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1873">Lien de navigation nav-1873</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1874">Lien de navigation nav-1874</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1875">Lien de navigation nav-1875</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1876">Lien de navigation nav-1876</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-1877">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1878">Lien de navigation nav-1878</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1879">Lien de navigation nav-1879</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1880">Lien de navigation nav-1880</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1881">Lien de navigation nav-1881</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1882">Lien de navigation nav-1882</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1883">Lien de navigation nav-1883</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1884">Lien de navigation nav-1884</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1885">Lien de navigation nav-1885</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-1886">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1887">Lien de navigation nav-1887</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1888">Lien de navigation nav-1888</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1889" aria-current="page">Lien de navigation nav-1889</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1890">Lien de navigation nav-1890</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1891">Lien de navigation nav-1891</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1892">Lien de navigation nav-1892</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1893">Lien de navigation nav-1893</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1894">Lien de navigation nav-1894</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-1895">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1896">Lien de navigation nav-1896</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1897">Lien de navigation nav-1897</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1898">Lien de navigation nav-1898</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1899">Lien de navigation nav-1899</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1900">Lien de navigation nav-1900</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1901">Lien de navigation nav-1901</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1902">Lien de navigation nav-1902</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1903">Lien de navigation nav-1903</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1905">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1905">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1906">Lien de navigation nav-1906</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1907">Lien de navigation nav-1907</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1908">Lien de navigation nav-1908</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1909">Lien de navigation nav-1909</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1910">Lien de navigation nav-1910</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1911">Lien de navigation nav-1911</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1912">Lien de navigation nav-1912</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1913">Lien de navigation nav-1913</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-1927" aria-haspopup="menu" id="button-1928" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1927" aria-labelledby="button-1928">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1927" id="button-1930" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1931" 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-1932">accès direct nav-1932</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1933">accès direct nav-1933</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1934">accès direct nav-1934</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1935">accès direct nav-1935</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-1944" aria-haspopup="menu" id="button-1945" 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-1946" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-1947" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-1948" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1944" aria-labelledby="button-1945">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1944" id="button-1949" 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-2118" aria-haspopup="menu" id="button-2119" 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-2121" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2122" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2123" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-2124">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-2117" aria-expanded="false" title="Sélectionner une langue" id="button-2125">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2117">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2126" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2127">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2128">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2129">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2130">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2131">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2118" aria-labelledby="button-2119">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2118" id="button-2132" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2120" 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-2134">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2134">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2135">Lien de navigation nav-2135</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2136">Lien de navigation nav-2136</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2137">Lien de navigation nav-2137</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2138">Lien de navigation nav-2138</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2139">Lien de navigation nav-2139</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2140">Lien de navigation nav-2140</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2141">Lien de navigation nav-2141</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2142">Lien de navigation nav-2142</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2144">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2144">
<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-2144" id="button-2280" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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-2145">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2146">Lien de navigation nav-2146</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2147">Lien de navigation nav-2147</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2148">Lien de navigation nav-2148</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2149">Lien de navigation nav-2149</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2150">Lien de navigation nav-2150</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2151">Lien de navigation nav-2151</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2152">Lien de navigation nav-2152</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2153">Lien de navigation nav-2153</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-2154">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2155">Lien de navigation nav-2155</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2156">Lien de navigation nav-2156</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2157">Lien de navigation nav-2157</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2158">Lien de navigation nav-2158</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2159">Lien de navigation nav-2159</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2160">Lien de navigation nav-2160</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2161">Lien de navigation nav-2161</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2162">Lien de navigation nav-2162</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-2163">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2164">Lien de navigation nav-2164</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2165">Lien de navigation nav-2165</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2166" aria-current="page">Lien de navigation nav-2166</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2167">Lien de navigation nav-2167</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2168">Lien de navigation nav-2168</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2169">Lien de navigation nav-2169</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2170">Lien de navigation nav-2170</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2171">Lien de navigation nav-2171</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-2172">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2173">Lien de navigation nav-2173</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2174">Lien de navigation nav-2174</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2175">Lien de navigation nav-2175</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2176">Lien de navigation nav-2176</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2177">Lien de navigation nav-2177</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2178">Lien de navigation nav-2178</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2179">Lien de navigation nav-2179</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2180">Lien de navigation nav-2180</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2181">accès direct nav-2181</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2183" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2183">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2184">Lien de navigation nav-2184</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2185">Lien de navigation nav-2185</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2186" aria-current="page">Lien de navigation nav-2186</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2187">Lien de navigation nav-2187</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2188">Lien de navigation nav-2188</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2189">Lien de navigation nav-2189</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2190">Lien de navigation nav-2190</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2191">Lien de navigation nav-2191</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2193">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2193">
<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-2193" id="button-2281" 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-2194" 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-2195">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2196">Lien de navigation nav-2196</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2197">Lien de navigation nav-2197</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2198">Lien de navigation nav-2198</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2199">Lien de navigation nav-2199</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2200">Lien de navigation nav-2200</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2201">Lien de navigation nav-2201</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2202">Lien de navigation nav-2202</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2203">Lien de navigation nav-2203</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-2204">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2205">Lien de navigation nav-2205</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2206">Lien de navigation nav-2206</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2207">Lien de navigation nav-2207</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2208">Lien de navigation nav-2208</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2209">Lien de navigation nav-2209</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2210">Lien de navigation nav-2210</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2211">Lien de navigation nav-2211</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2212">Lien de navigation nav-2212</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-2213">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2214">Lien de navigation nav-2214</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2215">Lien de navigation nav-2215</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2216" aria-current="page">Lien de navigation nav-2216</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2217">Lien de navigation nav-2217</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2218">Lien de navigation nav-2218</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2219">Lien de navigation nav-2219</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2220">Lien de navigation nav-2220</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2221">Lien de navigation nav-2221</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-2222">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2223">Lien de navigation nav-2223</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2224">Lien de navigation nav-2224</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2225">Lien de navigation nav-2225</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2226">Lien de navigation nav-2226</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2227">Lien de navigation nav-2227</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2228">Lien de navigation nav-2228</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2229">Lien de navigation nav-2229</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2230">Lien de navigation nav-2230</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2231">accès direct nav-2231</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2233">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2233">
<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-2233" id="button-2282" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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-2234">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2235">Lien de navigation nav-2235</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2236">Lien de navigation nav-2236</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2237">Lien de navigation nav-2237</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2238">Lien de navigation nav-2238</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2239">Lien de navigation nav-2239</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2240">Lien de navigation nav-2240</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2241">Lien de navigation nav-2241</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2242">Lien de navigation nav-2242</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-2243">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2244">Lien de navigation nav-2244</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2245">Lien de navigation nav-2245</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2246">Lien de navigation nav-2246</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2247">Lien de navigation nav-2247</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2248">Lien de navigation nav-2248</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2249">Lien de navigation nav-2249</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2250">Lien de navigation nav-2250</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2251">Lien de navigation nav-2251</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-2252">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2253">Lien de navigation nav-2253</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2254">Lien de navigation nav-2254</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2255" aria-current="page">Lien de navigation nav-2255</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2256">Lien de navigation nav-2256</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2257">Lien de navigation nav-2257</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2258">Lien de navigation nav-2258</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2259">Lien de navigation nav-2259</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2260">Lien de navigation nav-2260</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-2261">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2262">Lien de navigation nav-2262</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2263">Lien de navigation nav-2263</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2264">Lien de navigation nav-2264</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2265">Lien de navigation nav-2265</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2266">Lien de navigation nav-2266</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2267">Lien de navigation nav-2267</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2268">Lien de navigation nav-2268</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2269">Lien de navigation nav-2269</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2271">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2271">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2272">Lien de navigation nav-2272</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2273">Lien de navigation nav-2273</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2274">Lien de navigation nav-2274</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2275">Lien de navigation nav-2275</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2276">Lien de navigation nav-2276</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2277">Lien de navigation nav-2277</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2278">Lien de navigation nav-2278</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2279">Lien de navigation nav-2279</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-2296" aria-haspopup="menu" id="button-2297" 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-2299" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2300" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2301" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2296" aria-labelledby="button-2297">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2296" id="button-2302" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2303" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2304">accès direct nav-2304</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2305">accès direct nav-2305</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2306">accès direct nav-2306</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2307">accès direct nav-2307</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-2325" id="button-2326" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2327" aria-haspopup="menu" id="button-2328" 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-2325">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2325" id="button-2330" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2324" role="search">
<label class="fr-label" for="search-2324-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2324-input-messages" placeholder="Rechercher" id="search-2324-input" type="search">
<div class="fr-messages-group" id="search-2324-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2332" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2327" aria-labelledby="button-2328">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2327" id="button-2333" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2334" 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-2335">accès direct nav-2335</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2336">accès direct nav-2336</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2337">accès direct nav-2337</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2338">accès direct nav-2338</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-2356" id="button-2357" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2358" aria-haspopup="menu" id="button-2359" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-2356">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2356" id="button-2361" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2355" role="search">
<label class="fr-label" for="search-2355-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2355-input-messages" placeholder="Rechercher" id="search-2355-input" type="search">
<div class="fr-messages-group" id="search-2355-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2363" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2358" aria-labelledby="button-2359">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2358" id="button-2364" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2365" 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-2366">accès direct nav-2366</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2367">accès direct nav-2367</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2368">accès direct nav-2368</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2369">accès direct nav-2369</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-2390" id="button-2391" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2392" aria-haspopup="menu" id="button-2393" 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-2395" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2396" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2397" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2390">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2390" id="button-2398" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2389" role="search">
<label class="fr-label" for="search-2389-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2389-input-messages" placeholder="Rechercher" id="search-2389-input" type="search">
<div class="fr-messages-group" id="search-2389-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2400" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2392" aria-labelledby="button-2393">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2392" id="button-2401" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2402" 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-2403">accès direct nav-2403</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2404">accès direct nav-2404</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2405">accès direct nav-2405</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2406">accès direct nav-2406</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-2414" aria-haspopup="menu" id="button-2415" 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-2416" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2417" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2418" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2414" aria-labelledby="button-2415">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2414" id="button-2419" 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-2440" id="button-2441" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2442" aria-haspopup="menu" id="button-2443" 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-2445" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2446" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2447" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2440">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2440" id="button-2448" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2439" role="search">
<label class="fr-label" for="search-2439-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2439-input-messages" placeholder="Rechercher" id="search-2439-input" type="search">
<div class="fr-messages-group" id="search-2439-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2450" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2442" aria-labelledby="button-2443">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2442" id="button-2451" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2452" 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-2453">accès direct nav-2453</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2454">accès direct nav-2454</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2455">accès direct nav-2455</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2456">accès direct nav-2456</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-2477" id="button-2478" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2479" aria-haspopup="menu" id="button-2480" 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-2482" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2483" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2484" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2477">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2477" id="button-2485" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2476" role="search">
<label class="fr-label" for="search-2476-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2476-input-messages" placeholder="Rechercher" id="search-2476-input" type="search">
<div class="fr-messages-group" id="search-2476-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2487" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2479" aria-labelledby="button-2480">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2479" id="button-2488" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2489" 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-2490">accès direct nav-2490</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2491">accès direct nav-2491</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2492">accès direct nav-2492</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2493">accès direct nav-2493</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-2504" aria-haspopup="menu" id="button-2505" 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-2504" aria-labelledby="button-2505">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2504" id="button-2507" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2508" 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-2509">accès direct nav-2509</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2510">accès direct nav-2510</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2511">accès direct nav-2511</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2512">accès direct nav-2512</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-2676" id="button-2677" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2678" aria-haspopup="menu" id="button-2679" 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-2681" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-2682" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-2683" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2676">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-2676">Fermer</button>
<div class="fr-search-bar" id="search-2675" role="search">
<label class="fr-label" for="search-2675-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2675-input-messages" placeholder="Rechercher" id="search-2675-input" type="search">
<div class="fr-messages-group" id="search-2675-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2685" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2678" aria-labelledby="button-2679">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-2678">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2680" 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-2687">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2687">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2688">Lien de navigation nav-2688</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2689">Lien de navigation nav-2689</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2690">Lien de navigation nav-2690</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2691">Lien de navigation nav-2691</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2692">Lien de navigation nav-2692</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2693">Lien de navigation nav-2693</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2694">Lien de navigation nav-2694</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2695">Lien de navigation nav-2695</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2697">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2697">
<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-2697" id="button-2833" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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-2698">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2699">Lien de navigation nav-2699</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2700">Lien de navigation nav-2700</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2701">Lien de navigation nav-2701</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2702">Lien de navigation nav-2702</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2703">Lien de navigation nav-2703</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2704">Lien de navigation nav-2704</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2705">Lien de navigation nav-2705</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2706">Lien de navigation nav-2706</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-2707">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2708">Lien de navigation nav-2708</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2709">Lien de navigation nav-2709</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2710">Lien de navigation nav-2710</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2711">Lien de navigation nav-2711</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2712">Lien de navigation nav-2712</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2713">Lien de navigation nav-2713</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2714">Lien de navigation nav-2714</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2715">Lien de navigation nav-2715</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-2716">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2717">Lien de navigation nav-2717</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2718">Lien de navigation nav-2718</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2719" aria-current="page">Lien de navigation nav-2719</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2720">Lien de navigation nav-2720</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2721">Lien de navigation nav-2721</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2722">Lien de navigation nav-2722</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2723">Lien de navigation nav-2723</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2724">Lien de navigation nav-2724</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-2725">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2726">Lien de navigation nav-2726</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2727">Lien de navigation nav-2727</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2728">Lien de navigation nav-2728</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2729">Lien de navigation nav-2729</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2730">Lien de navigation nav-2730</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2731">Lien de navigation nav-2731</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2732">Lien de navigation nav-2732</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2733">Lien de navigation nav-2733</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2734">accès direct nav-2734</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2736" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2736">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2737">Lien de navigation nav-2737</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2738">Lien de navigation nav-2738</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2739" aria-current="page">Lien de navigation nav-2739</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2740">Lien de navigation nav-2740</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2741">Lien de navigation nav-2741</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2742">Lien de navigation nav-2742</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2743">Lien de navigation nav-2743</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2744">Lien de navigation nav-2744</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2746">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2746">
<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-2746" id="button-2834" 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-2747" 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-2748">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2749">Lien de navigation nav-2749</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2750">Lien de navigation nav-2750</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2751">Lien de navigation nav-2751</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2752">Lien de navigation nav-2752</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2753">Lien de navigation nav-2753</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2754">Lien de navigation nav-2754</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2755">Lien de navigation nav-2755</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2756">Lien de navigation nav-2756</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-2757">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2765">Lien de navigation nav-2765</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-2766">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2767">Lien de navigation nav-2767</a>
</li>
<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" aria-current="page">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>
</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-2775">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2776">Lien de navigation nav-2776</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2784">accès direct nav-2784</a>
</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-2835" 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">
<p class="fr-hidden fr-unhidden-lg"></p>
</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-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">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2824">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2824">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2825">Lien de navigation nav-2825</a>
</li>
<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">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>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>