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-1746" id="button-1747" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1748" aria-haspopup="menu" id="button-1749" 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-1751" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-1752" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-1753" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1746">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1746" id="button-1754" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1745" role="search">
<label class="fr-label" for="search-1745-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1745-input-messages" placeholder="Rechercher" id="search-1745-input" type="search">
<div class="fr-messages-group" id="search-1745-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1756" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1748" aria-labelledby="button-1749">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1748" id="button-1757" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1750" 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-1759">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1759">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1760">Lien de navigation nav-1760</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1761">Lien de navigation nav-1761</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1762">Lien de navigation nav-1762</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1763">Lien de navigation nav-1763</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1764">Lien de navigation nav-1764</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1765">Lien de navigation nav-1765</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1766">Lien de navigation nav-1766</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1767">Lien de navigation nav-1767</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1769">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1769">
<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-1769" id="button-1905" 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-1770">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1777">Lien de navigation nav-1777</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1778">Lien de navigation nav-1778</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1806">accès direct nav-1806</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1808" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1808">
<ul class="fr-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1815">Lien de navigation nav-1815</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1816">Lien de navigation nav-1816</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1818">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1818">
<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-1818" id="button-1906" 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-1819" 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-1820">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1826">Lien de navigation nav-1826</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1827">Lien de navigation nav-1827</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1828">Lien de navigation nav-1828</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1856">accès direct nav-1856</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1858">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1858">
<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-1858" id="button-1907" 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-1859">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1865">Lien de navigation nav-1865</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1866">Lien de navigation nav-1866</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1867">Lien de navigation nav-1867</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1896">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1896">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1904">Lien de navigation nav-1904</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-1918" aria-haspopup="menu" id="button-1919" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1918" aria-labelledby="button-1919">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1918" id="button-1921" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1922" 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-1923">accès direct nav-1923</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1924">accès direct nav-1924</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1925">accès direct nav-1925</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1926">accès direct nav-1926</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-1935" aria-haspopup="menu" id="button-1936" 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-1937" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-1938" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-1939" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1935" aria-labelledby="button-1936">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1935" id="button-1940" 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-2109" aria-haspopup="menu" id="button-2110" 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-2112" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2113" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2114" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-2115">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-2108" aria-expanded="false" title="Sélectionner une langue" id="button-2116">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2108">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2117" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2118">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2119">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2120">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2121">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2122">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2109" aria-labelledby="button-2110">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2109" id="button-2123" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2111" 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-2125">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2125">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2126">Lien de navigation nav-2126</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2127">Lien de navigation nav-2127</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2128">Lien de navigation nav-2128</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2129">Lien de navigation nav-2129</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2130">Lien de navigation nav-2130</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2131">Lien de navigation nav-2131</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2132">Lien de navigation nav-2132</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2133">Lien de navigation nav-2133</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2135">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2135">
<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-2135" id="button-2271" 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-2136">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2143">Lien de navigation nav-2143</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2144">Lien de navigation nav-2144</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2172">accès direct nav-2172</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2174" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2174">
<ul class="fr-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2181">Lien de navigation nav-2181</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2182">Lien de navigation nav-2182</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2184">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2184">
<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-2184" id="button-2272" 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-2185" 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-2186">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2192">Lien de navigation nav-2192</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2193">Lien de navigation nav-2193</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2194">Lien de navigation nav-2194</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2222">accès direct nav-2222</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2224">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2224">
<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-2224" id="button-2273" 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-2225">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2231">Lien de navigation nav-2231</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2232">Lien de navigation nav-2232</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2233">Lien de navigation nav-2233</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2262">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2262">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2270">Lien de navigation nav-2270</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-2287" aria-haspopup="menu" id="button-2288" 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-2290" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2291" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2292" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2287" aria-labelledby="button-2288">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2287" id="button-2293" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2294" 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-2295">accès direct nav-2295</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2296">accès direct nav-2296</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2297">accès direct nav-2297</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2298">accès direct nav-2298</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-2316" id="button-2317" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2318" aria-haspopup="menu" id="button-2319" 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-2316">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2316" id="button-2321" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2315" role="search">
<label class="fr-label" for="search-2315-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2315-input-messages" placeholder="Rechercher" id="search-2315-input" type="search">
<div class="fr-messages-group" id="search-2315-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2323" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2318" aria-labelledby="button-2319">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2318" id="button-2324" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2325" 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-2326">accès direct nav-2326</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2327">accès direct nav-2327</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2328">accès direct nav-2328</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2329">accès direct nav-2329</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-2347" id="button-2348" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2349" aria-haspopup="menu" id="button-2350" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-2347">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2347" id="button-2352" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2346" role="search">
<label class="fr-label" for="search-2346-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2346-input-messages" placeholder="Rechercher" id="search-2346-input" type="search">
<div class="fr-messages-group" id="search-2346-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2354" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2349" aria-labelledby="button-2350">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2349" id="button-2355" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2356" 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-2357">accès direct nav-2357</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2358">accès direct nav-2358</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2359">accès direct nav-2359</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2360">accès direct nav-2360</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-2381" id="button-2382" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2383" aria-haspopup="menu" id="button-2384" 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-2386" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2387" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2388" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2381">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2381" id="button-2389" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2380" role="search">
<label class="fr-label" for="search-2380-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2380-input-messages" placeholder="Rechercher" id="search-2380-input" type="search">
<div class="fr-messages-group" id="search-2380-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2391" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2383" aria-labelledby="button-2384">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2383" id="button-2392" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2393" 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-2394">accès direct nav-2394</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2395">accès direct nav-2395</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2396">accès direct nav-2396</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2397">accès direct nav-2397</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-2405" aria-haspopup="menu" id="button-2406" 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-2407" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2408" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2409" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2405" aria-labelledby="button-2406">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2405" id="button-2410" 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-2431" id="button-2432" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2433" aria-haspopup="menu" id="button-2434" 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-2436" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2437" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2438" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2431">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2431" id="button-2439" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2430" role="search">
<label class="fr-label" for="search-2430-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2430-input-messages" placeholder="Rechercher" id="search-2430-input" type="search">
<div class="fr-messages-group" id="search-2430-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2441" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2433" aria-labelledby="button-2434">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2433" id="button-2442" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2443" 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-2444">accès direct nav-2444</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2445">accès direct nav-2445</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2446">accès direct nav-2446</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2447">accès direct nav-2447</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-2468" id="button-2469" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2470" aria-haspopup="menu" id="button-2471" 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-2473" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2474" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2475" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2468">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2468" id="button-2476" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2467" role="search">
<label class="fr-label" for="search-2467-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2467-input-messages" placeholder="Rechercher" id="search-2467-input" type="search">
<div class="fr-messages-group" id="search-2467-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2478" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2470" aria-labelledby="button-2471">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2470" id="button-2479" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2480" 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-2481">accès direct nav-2481</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2482">accès direct nav-2482</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2483">accès direct nav-2483</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2484">accès direct nav-2484</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-2495" aria-haspopup="menu" id="button-2496" 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-2495" aria-labelledby="button-2496">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2495" id="button-2498" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2499" 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-2500">accès direct nav-2500</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2501">accès direct nav-2501</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2502">accès direct nav-2502</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2503">accès direct nav-2503</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-2667" id="button-2668" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2669" aria-haspopup="menu" id="button-2670" 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-2672" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-2673" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-2674" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2667">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-2667">Fermer</button>
<div class="fr-search-bar" id="search-2666" role="search">
<label class="fr-label" for="search-2666-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2666-input-messages" placeholder="Rechercher" id="search-2666-input" type="search">
<div class="fr-messages-group" id="search-2666-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2676" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2669" aria-labelledby="button-2670">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-2669">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2671" 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-2678">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2678">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2679">Lien de navigation nav-2679</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2680">Lien de navigation nav-2680</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2681">Lien de navigation nav-2681</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2682">Lien de navigation nav-2682</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2683">Lien de navigation nav-2683</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2684">Lien de navigation nav-2684</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2685">Lien de navigation nav-2685</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2686">Lien de navigation nav-2686</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2688">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2688">
<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-2688" id="button-2824" 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-2689">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2696">Lien de navigation nav-2696</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2697">Lien de navigation nav-2697</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2725">accès direct nav-2725</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2727" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2727">
<ul class="fr-menu__list">
<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" aria-current="page">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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2734">Lien de navigation nav-2734</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2735">Lien de navigation nav-2735</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2737">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2737">
<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-2737" id="button-2825" 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-2738" 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-2739">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2745">Lien de navigation nav-2745</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2746">Lien de navigation nav-2746</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2747">Lien de navigation nav-2747</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2775">accès direct nav-2775</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2777">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2777">
<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-2777" id="button-2826" 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-2778">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2785">Lien de navigation nav-2785</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2786">Lien de navigation nav-2786</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-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" aria-current="page">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">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>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2815">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2815">
<ul class="fr-menu__list">
<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>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2823">Lien de navigation nav-2823</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>