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-1754" id="button-1755" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1756" aria-haspopup="menu" id="button-1757" 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-1759" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-1760" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-1761" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1754">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1754" id="button-1762" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1753" role="search">
<label class="fr-label" for="search-1753-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1753-input-messages" placeholder="Rechercher" id="search-1753-input" type="search">
<div class="fr-messages-group" id="search-1753-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1764" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1756" aria-labelledby="button-1757">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1756" id="button-1765" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1758" 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-1767">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1767">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1768">Lien de navigation nav-1768</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1777">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1777">
<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-1777" id="button-1913" 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-1778">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1779">Lien de navigation nav-1779</a>
</li>
<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>
</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-1787">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1788">Lien de navigation nav-1788</a>
</li>
<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>
</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-1796">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1797">Lien de navigation nav-1797</a>
</li>
<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" aria-current="page">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>
</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-1805">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1806">Lien de navigation nav-1806</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1814">accès direct nav-1814</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1816" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1816">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1817">Lien de navigation nav-1817</a>
</li>
<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" aria-current="page">Lien de navigation nav-1819</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1820">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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1826">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1826">
<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-1826" 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">
<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-1827" 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-1828">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1829">Lien de navigation nav-1829</a>
</li>
<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>
</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-1837">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1838">Lien de navigation nav-1838</a>
</li>
<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>
</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-1846">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1847">Lien de navigation nav-1847</a>
</li>
<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" aria-current="page">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>
</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-1855">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1856">Lien de navigation nav-1856</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1864">accès direct nav-1864</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1866">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1866">
<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-1866" 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">
<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-1867">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1868">Lien de navigation nav-1868</a>
</li>
<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>
</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-1876">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1877">Lien de navigation nav-1877</a>
</li>
<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>
</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-1885">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1886">Lien de navigation nav-1886</a>
</li>
<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" aria-current="page">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>
</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-1894">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1895">Lien de navigation nav-1895</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1904">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1904">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1905">Lien de navigation nav-1905</a>
</li>
<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>
</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-1926" aria-haspopup="menu" id="button-1927" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1926" aria-labelledby="button-1927">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1926" id="button-1929" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1930" 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-1931">accès direct nav-1931</a>
</li>
<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>
</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-1943" aria-haspopup="menu" id="button-1944" 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-1945" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-1946" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-1947" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1943" aria-labelledby="button-1944">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1943" id="button-1948" 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-2117" aria-haspopup="menu" id="button-2118" 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-2120" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2121" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2122" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav" id="translate-2123">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-2116" aria-expanded="false" title="Sélectionner une langue" id="button-2124">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-2116">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" id="language-2125" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#" id="language-2126">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#" id="language-2127">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#" id="language-2128">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#" id="language-2129">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#" id="language-2130">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2117" aria-labelledby="button-2118">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2117" id="button-2131" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2119" 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-2133">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2133">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2134">Lien de navigation nav-2134</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2143">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2143">
<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-2143" id="button-2279" 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-2144">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2145">Lien de navigation nav-2145</a>
</li>
<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>
</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-2153">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2154">Lien de navigation nav-2154</a>
</li>
<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>
</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-2162">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2163">Lien de navigation nav-2163</a>
</li>
<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" aria-current="page">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>
</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-2171">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2172">Lien de navigation nav-2172</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2180">accès direct nav-2180</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2182" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2182">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2183">Lien de navigation nav-2183</a>
</li>
<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" aria-current="page">Lien de navigation nav-2185</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2186">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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2192">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2192">
<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-2192" 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">
<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-2193" 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-2194">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2195">Lien de navigation nav-2195</a>
</li>
<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>
</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-2203">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2204">Lien de navigation nav-2204</a>
</li>
<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>
</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-2212">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2213">Lien de navigation nav-2213</a>
</li>
<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" aria-current="page">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>
</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-2221">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2222">Lien de navigation nav-2222</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2230">accès direct nav-2230</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2232">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2232">
<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-2232" 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">
<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-2233">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2234">Lien de navigation nav-2234</a>
</li>
<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>
</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-2242">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2243">Lien de navigation nav-2243</a>
</li>
<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>
</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-2251">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2252">Lien de navigation nav-2252</a>
</li>
<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" aria-current="page">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>
</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-2260">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2261">Lien de navigation nav-2261</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2270">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2270">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2271">Lien de navigation nav-2271</a>
</li>
<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>
</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-2295" aria-haspopup="menu" id="button-2296" 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-2298" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2299" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2300" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2295" aria-labelledby="button-2296">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2295" id="button-2301" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2302" 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-2303">accès direct nav-2303</a>
</li>
<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>
</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-2324" id="button-2325" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2326" aria-haspopup="menu" id="button-2327" 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-2324">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2324" id="button-2329" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2323" role="search">
<label class="fr-label" for="search-2323-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2323-input-messages" placeholder="Rechercher" id="search-2323-input" type="search">
<div class="fr-messages-group" id="search-2323-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2331" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2326" aria-labelledby="button-2327">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2326" id="button-2332" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2333" 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-2334">accès direct nav-2334</a>
</li>
<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>
</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-2355" id="button-2356" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2357" aria-haspopup="menu" id="button-2358" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-2355">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2355" id="button-2360" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2354" role="search">
<label class="fr-label" for="search-2354-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2354-input-messages" placeholder="Rechercher" id="search-2354-input" type="search">
<div class="fr-messages-group" id="search-2354-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2362" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2357" aria-labelledby="button-2358">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2357" id="button-2363" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2364" 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-2365">accès direct nav-2365</a>
</li>
<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>
</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-2389" id="button-2390" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2391" aria-haspopup="menu" id="button-2392" 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-2394" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2395" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2396" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2389">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2389" id="button-2397" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2388" role="search">
<label class="fr-label" for="search-2388-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2388-input-messages" placeholder="Rechercher" id="search-2388-input" type="search">
<div class="fr-messages-group" id="search-2388-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2399" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2391" aria-labelledby="button-2392">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2391" id="button-2400" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2401" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2402">accès direct nav-2402</a>
</li>
<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>
</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-2413" aria-haspopup="menu" id="button-2414" 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-2415" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2416" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2417" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2413" aria-labelledby="button-2414">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2413" id="button-2418" 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-2439" id="button-2440" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2441" aria-haspopup="menu" id="button-2442" 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-2444" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2445" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2446" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2439">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2439" id="button-2447" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2438" role="search">
<label class="fr-label" for="search-2438-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2438-input-messages" placeholder="Rechercher" id="search-2438-input" type="search">
<div class="fr-messages-group" id="search-2438-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2449" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2441" aria-labelledby="button-2442">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2441" id="button-2450" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2451" 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-2452">accès direct nav-2452</a>
</li>
<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>
</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-2476" id="button-2477" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2478" aria-haspopup="menu" id="button-2479" 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-2481" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" id="button-2482" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" id="button-2483" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2476">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-2476" id="button-2484" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-2475" role="search">
<label class="fr-label" for="search-2475-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2475-input-messages" placeholder="Rechercher" id="search-2475-input" type="search">
<div class="fr-messages-group" id="search-2475-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2486" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2478" aria-labelledby="button-2479">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2478" id="button-2487" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2488" 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-2489">accès direct nav-2489</a>
</li>
<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>
</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-2503" aria-haspopup="menu" id="button-2504" 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-2503" aria-labelledby="button-2504">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-2503" id="button-2506" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2507" 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-2508">accès direct nav-2508</a>
</li>
<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>
</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-2675" id="button-2676" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-2677" aria-haspopup="menu" id="button-2678" 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-2680" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" id="link-2681" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" id="link-2682" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-2675">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-2675">Fermer</button>
<div class="fr-search-bar" id="search-2674" role="search">
<label class="fr-label" for="search-2674-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-2674-input-messages" placeholder="Rechercher" id="search-2674-input" type="search">
<div class="fr-messages-group" id="search-2674-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-2684" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-2677" aria-labelledby="button-2678">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-2677">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-2679" 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-2686">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2686">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2687">Lien de navigation nav-2687</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2696">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2696">
<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-2696" id="button-2832" 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-2697">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2698">Lien de navigation nav-2698</a>
</li>
<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>
</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-2706">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2707">Lien de navigation nav-2707</a>
</li>
<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>
</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-2715">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2716">Lien de navigation nav-2716</a>
</li>
<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" aria-current="page">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>
</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-2724">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2725">Lien de navigation nav-2725</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2733">accès direct nav-2733</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2735" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2735">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2736">Lien de navigation nav-2736</a>
</li>
<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" aria-current="page">Lien de navigation nav-2738</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2739">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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2745">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2745">
<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-2745" 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">
<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-2746" 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-2747">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2748">Lien de navigation nav-2748</a>
</li>
<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>
</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-2756">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2757">Lien de navigation nav-2757</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2758">Lien de navigation nav-2758</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2759">Lien de navigation nav-2759</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2760">Lien de navigation nav-2760</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2761">Lien de navigation nav-2761</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2762">Lien de navigation nav-2762</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2763">Lien de navigation nav-2763</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2764">Lien de navigation nav-2764</a>
</li>
</ul>
</div>
<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-2765">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2766">Lien de navigation nav-2766</a>
</li>
<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" aria-current="page">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>
</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-2774">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2775">Lien de navigation nav-2775</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-2783">accès direct nav-2783</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2785">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-2785">
<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-2785" 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">
<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-2786">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2787">Lien de navigation nav-2787</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2788">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>
</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-2795">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2796">Lien de navigation nav-2796</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2797">Lien de navigation nav-2797</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2798">Lien de navigation nav-2798</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2799">Lien de navigation nav-2799</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2800">Lien de navigation nav-2800</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2801">Lien de navigation nav-2801</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2802">Lien de navigation nav-2802</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2803">Lien de navigation nav-2803</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-2804">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2805">Lien de navigation nav-2805</a>
</li>
<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" aria-current="page">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>
</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-2813">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2814">Lien de navigation nav-2814</a>
</li>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-2823">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-2823">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2824">Lien de navigation nav-2824</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-2825">Lien de navigation nav-2825</a>
</li>
<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>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>