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-1087" id="button-1088" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1089" aria-haspopup="menu" id="button-1090" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1087">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1087" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1086" role="search">
<label class="fr-label" for="search-1086-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1086-input-messages" placeholder="Rechercher" id="search-1086-input" type="search">
<div class="fr-messages-group" id="search-1086-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1093" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1089" aria-labelledby="button-1090">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1089" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1091" 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-1095">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1095">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1096">Lien de navigation nav-1096</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1097">Lien de navigation nav-1097</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1098">Lien de navigation nav-1098</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1099">Lien de navigation nav-1099</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1100">Lien de navigation nav-1100</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1101">Lien de navigation nav-1101</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1102">Lien de navigation nav-1102</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1103">Lien de navigation nav-1103</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1105">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1105">
<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-1105" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1106">Lien de navigation nav-1106</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1107">Lien de navigation nav-1107</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1108">Lien de navigation nav-1108</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1109">Lien de navigation nav-1109</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1110">Lien de navigation nav-1110</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1111">Lien de navigation nav-1111</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1112">Lien de navigation nav-1112</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1113">Lien de navigation nav-1113</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1114">Lien de navigation nav-1114</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1115">Lien de navigation nav-1115</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1116">Lien de navigation nav-1116</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1117">Lien de navigation nav-1117</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1118">Lien de navigation nav-1118</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1119">Lien de navigation nav-1119</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1120">Lien de navigation nav-1120</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1121">Lien de navigation nav-1121</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1122">Lien de navigation nav-1122</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1123">Lien de navigation nav-1123</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1124" aria-current="page">Lien de navigation nav-1124</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1125">Lien de navigation nav-1125</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1126">Lien de navigation nav-1126</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1127">Lien de navigation nav-1127</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1128">Lien de navigation nav-1128</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1129">Lien de navigation nav-1129</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1130">Lien de navigation nav-1130</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1131">Lien de navigation nav-1131</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1132">Lien de navigation nav-1132</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1133">Lien de navigation nav-1133</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1134">Lien de navigation nav-1134</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1135">Lien de navigation nav-1135</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1136">Lien de navigation nav-1136</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1137">Lien de navigation nav-1137</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1138">accès direct nav-1138</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1140" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1140">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1141">Lien de navigation nav-1141</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1142">Lien de navigation nav-1142</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1143" aria-current="page">Lien de navigation nav-1143</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1144">Lien de navigation nav-1144</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1145">Lien de navigation nav-1145</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1146">Lien de navigation nav-1146</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1147">Lien de navigation nav-1147</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1148">Lien de navigation nav-1148</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1150">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1150">
<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-1150" 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-1151" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1152">Lien de navigation nav-1152</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1153">Lien de navigation nav-1153</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1154">Lien de navigation nav-1154</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1155">Lien de navigation nav-1155</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1156">Lien de navigation nav-1156</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1157">Lien de navigation nav-1157</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1158">Lien de navigation nav-1158</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1159">Lien de navigation nav-1159</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1160">Lien de navigation nav-1160</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1161">Lien de navigation nav-1161</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1162">Lien de navigation nav-1162</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1163">Lien de navigation nav-1163</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1164">Lien de navigation nav-1164</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1165">Lien de navigation nav-1165</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1166">Lien de navigation nav-1166</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1167">Lien de navigation nav-1167</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1168">Lien de navigation nav-1168</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1169">Lien de navigation nav-1169</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1170" aria-current="page">Lien de navigation nav-1170</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1171">Lien de navigation nav-1171</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1172">Lien de navigation nav-1172</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1173">Lien de navigation nav-1173</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1174">Lien de navigation nav-1174</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1175">Lien de navigation nav-1175</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1176">Lien de navigation nav-1176</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1177">Lien de navigation nav-1177</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1178">Lien de navigation nav-1178</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1179">Lien de navigation nav-1179</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1180">Lien de navigation nav-1180</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1181">Lien de navigation nav-1181</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1182">Lien de navigation nav-1182</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1183">Lien de navigation nav-1183</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1184">accès direct nav-1184</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1186">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1186">
<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-1186" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1187">Lien de navigation nav-1187</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1188">Lien de navigation nav-1188</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1189">Lien de navigation nav-1189</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1190">Lien de navigation nav-1190</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1191">Lien de navigation nav-1191</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1192">Lien de navigation nav-1192</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1193">Lien de navigation nav-1193</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1194">Lien de navigation nav-1194</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1195">Lien de navigation nav-1195</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1196">Lien de navigation nav-1196</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1197">Lien de navigation nav-1197</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1198">Lien de navigation nav-1198</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1199">Lien de navigation nav-1199</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1200">Lien de navigation nav-1200</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1201">Lien de navigation nav-1201</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1202">Lien de navigation nav-1202</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1203">Lien de navigation nav-1203</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1204">Lien de navigation nav-1204</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1205" aria-current="page">Lien de navigation nav-1205</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1206">Lien de navigation nav-1206</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1207">Lien de navigation nav-1207</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1208">Lien de navigation nav-1208</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1209">Lien de navigation nav-1209</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1210">Lien de navigation nav-1210</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1211">Lien de navigation nav-1211</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1212">Lien de navigation nav-1212</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1213">Lien de navigation nav-1213</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1214">Lien de navigation nav-1214</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1215">Lien de navigation nav-1215</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1216">Lien de navigation nav-1216</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1217">Lien de navigation nav-1217</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1218">Lien de navigation nav-1218</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1220">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1220">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1221">Lien de navigation nav-1221</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1222">Lien de navigation nav-1222</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1223">Lien de navigation nav-1223</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1224">Lien de navigation nav-1224</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1225">Lien de navigation nav-1225</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1226">Lien de navigation nav-1226</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1227">Lien de navigation nav-1227</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1228">Lien de navigation nav-1228</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-1238" aria-haspopup="menu" id="button-1239" title="Menu">
Menu
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1238" aria-labelledby="button-1239">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1238" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1241" 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-1242">accès direct nav-1242</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1243">accès direct nav-1243</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1244">accès direct nav-1244</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1245">accès direct nav-1245</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-1250" aria-haspopup="menu" id="button-1251" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1250" aria-labelledby="button-1251">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1250" 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-1393" aria-haspopup="menu" id="button-1394" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
<nav role="navigation" class="fr-translate fr-nav">
<div class="fr-nav__item">
<button class="fr-translate__btn fr-btn fr-btn--tertiary" aria-controls="translate-1392" aria-expanded="false" title="Sélectionner une langue">
FR<span class="fr-hidden-lg"> - Français</span>
</button>
<div class="fr-collapse fr-translate__menu fr-menu" id="translate-1392">
<ul class="fr-menu__list">
<li>
<a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="#" aria-current="true">FR - Français</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="#">EN - English</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="#">ES - Español</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="de" lang="de" href="#">DE - Deutsch</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="tr" lang="tr" href="#">TR - Türkçe</a>
</li>
<li>
<a class="fr-translate__language fr-nav__link" hreflang="ro" lang="ro" href="#">RO - Română</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1393" aria-labelledby="button-1394">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1393" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1395" 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-1397">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1397">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1398">Lien de navigation nav-1398</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1399">Lien de navigation nav-1399</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1400">Lien de navigation nav-1400</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1401">Lien de navigation nav-1401</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1402">Lien de navigation nav-1402</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1403">Lien de navigation nav-1403</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1404">Lien de navigation nav-1404</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1405">Lien de navigation nav-1405</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1407">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1407">
<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-1407" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1408">Lien de navigation nav-1408</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1409">Lien de navigation nav-1409</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1410">Lien de navigation nav-1410</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1411">Lien de navigation nav-1411</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1412">Lien de navigation nav-1412</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1413">Lien de navigation nav-1413</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1414">Lien de navigation nav-1414</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1415">Lien de navigation nav-1415</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1416">Lien de navigation nav-1416</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1417">Lien de navigation nav-1417</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1418">Lien de navigation nav-1418</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1419">Lien de navigation nav-1419</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1420">Lien de navigation nav-1420</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1421">Lien de navigation nav-1421</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1422">Lien de navigation nav-1422</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1423">Lien de navigation nav-1423</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1424">Lien de navigation nav-1424</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1425">Lien de navigation nav-1425</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1426" aria-current="page">Lien de navigation nav-1426</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1427">Lien de navigation nav-1427</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1428">Lien de navigation nav-1428</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1429">Lien de navigation nav-1429</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1430">Lien de navigation nav-1430</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1431">Lien de navigation nav-1431</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1432">Lien de navigation nav-1432</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1433">Lien de navigation nav-1433</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1434">Lien de navigation nav-1434</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1435">Lien de navigation nav-1435</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1436">Lien de navigation nav-1436</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1437">Lien de navigation nav-1437</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1438">Lien de navigation nav-1438</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1439">Lien de navigation nav-1439</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1440">accès direct nav-1440</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1442" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1442">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1443">Lien de navigation nav-1443</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1444">Lien de navigation nav-1444</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1445" aria-current="page">Lien de navigation nav-1445</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1446">Lien de navigation nav-1446</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1447">Lien de navigation nav-1447</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1448">Lien de navigation nav-1448</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1449">Lien de navigation nav-1449</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1450">Lien de navigation nav-1450</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1452">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1452">
<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-1452" 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-1453" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1454">Lien de navigation nav-1454</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1455">Lien de navigation nav-1455</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1456">Lien de navigation nav-1456</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1457">Lien de navigation nav-1457</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1458">Lien de navigation nav-1458</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1459">Lien de navigation nav-1459</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1460">Lien de navigation nav-1460</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1461">Lien de navigation nav-1461</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1462">Lien de navigation nav-1462</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1463">Lien de navigation nav-1463</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1464">Lien de navigation nav-1464</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1465">Lien de navigation nav-1465</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1466">Lien de navigation nav-1466</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1467">Lien de navigation nav-1467</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1468">Lien de navigation nav-1468</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1469">Lien de navigation nav-1469</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1470">Lien de navigation nav-1470</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1471">Lien de navigation nav-1471</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1472" aria-current="page">Lien de navigation nav-1472</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1473">Lien de navigation nav-1473</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1474">Lien de navigation nav-1474</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1475">Lien de navigation nav-1475</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1476">Lien de navigation nav-1476</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1477">Lien de navigation nav-1477</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1478">Lien de navigation nav-1478</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1479">Lien de navigation nav-1479</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1480">Lien de navigation nav-1480</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1481">Lien de navigation nav-1481</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1482">Lien de navigation nav-1482</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1483">Lien de navigation nav-1483</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1484">Lien de navigation nav-1484</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1485">Lien de navigation nav-1485</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1486">accès direct nav-1486</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1488">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1488">
<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-1488" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1489">Lien de navigation nav-1489</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1490">Lien de navigation nav-1490</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1491">Lien de navigation nav-1491</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1492">Lien de navigation nav-1492</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1493">Lien de navigation nav-1493</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1494">Lien de navigation nav-1494</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1495">Lien de navigation nav-1495</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1496">Lien de navigation nav-1496</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1497">Lien de navigation nav-1497</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1498">Lien de navigation nav-1498</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1499">Lien de navigation nav-1499</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1500">Lien de navigation nav-1500</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1501">Lien de navigation nav-1501</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1502">Lien de navigation nav-1502</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1503">Lien de navigation nav-1503</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1504">Lien de navigation nav-1504</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1505">Lien de navigation nav-1505</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1506">Lien de navigation nav-1506</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1507" aria-current="page">Lien de navigation nav-1507</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1508">Lien de navigation nav-1508</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1509">Lien de navigation nav-1509</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1510">Lien de navigation nav-1510</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1511">Lien de navigation nav-1511</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1512">Lien de navigation nav-1512</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1513">Lien de navigation nav-1513</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1514">Lien de navigation nav-1514</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1515">Lien de navigation nav-1515</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1516">Lien de navigation nav-1516</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1517">Lien de navigation nav-1517</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1518">Lien de navigation nav-1518</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1519">Lien de navigation nav-1519</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1520">Lien de navigation nav-1520</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1522">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1522">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1523">Lien de navigation nav-1523</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1524">Lien de navigation nav-1524</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1525">Lien de navigation nav-1525</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1526">Lien de navigation nav-1526</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1527">Lien de navigation nav-1527</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1528">Lien de navigation nav-1528</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1529">Lien de navigation nav-1529</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1530">Lien de navigation nav-1530</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-1540" aria-haspopup="menu" id="button-1541" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1540" aria-labelledby="button-1541">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1540" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1543" 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-1544">accès direct nav-1544</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1545">accès direct nav-1545</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1546">accès direct nav-1546</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1547">accès direct nav-1547</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-1563" id="button-1564" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1565" aria-haspopup="menu" id="button-1566" 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-1563">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1563" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1562" role="search">
<label class="fr-label" for="search-1562-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1562-input-messages" placeholder="Rechercher" id="search-1562-input" type="search">
<div class="fr-messages-group" id="search-1562-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1569" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1565" aria-labelledby="button-1566">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1565" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1570" 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-1571">accès direct nav-1571</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1572">accès direct nav-1572</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1573">accès direct nav-1573</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1574">accès direct nav-1574</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-1590" id="button-1591" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1592" aria-haspopup="menu" id="button-1593" title="Menu">
Menu
</button>
</div>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-1590">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1590" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1589" role="search">
<label class="fr-label" for="search-1589-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1589-input-messages" placeholder="Rechercher" id="search-1589-input" type="search">
<div class="fr-messages-group" id="search-1589-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1596" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1592" aria-labelledby="button-1593">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1592" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1597" 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-1598">accès direct nav-1598</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1599">accès direct nav-1599</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1600">accès direct nav-1600</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1601">accès direct nav-1601</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-1617" id="button-1618" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1619" aria-haspopup="menu" id="button-1620" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1617">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1617" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1616" role="search">
<label class="fr-label" for="search-1616-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1616-input-messages" placeholder="Rechercher" id="search-1616-input" type="search">
<div class="fr-messages-group" id="search-1616-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1623" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1619" aria-labelledby="button-1620">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1619" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1624" 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-1625">accès direct nav-1625</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1626">accès direct nav-1626</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1627">accès direct nav-1627</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1628">accès direct nav-1628</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-1632" aria-haspopup="menu" id="button-1633" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1632" aria-labelledby="button-1633">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1632" 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-1649" id="button-1650" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1651" aria-haspopup="menu" id="button-1652" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1649">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1649" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1648" role="search">
<label class="fr-label" for="search-1648-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1648-input-messages" placeholder="Rechercher" id="search-1648-input" type="search">
<div class="fr-messages-group" id="search-1648-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1655" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1651" aria-labelledby="button-1652">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1651" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1656" 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-1657">accès direct nav-1657</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1658">accès direct nav-1658</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1659">accès direct nav-1659</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1660">accès direct nav-1660</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-1676" id="button-1677" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1678" aria-haspopup="menu" id="button-1679" 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" href="#[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-btn fr-icon-lock-line" href="#[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-btn fr-icon-account-line" href="#[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1676">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-1676" title="Fermer">
Fermer
</button>
<div class="fr-search-bar" id="search-1675" role="search">
<label class="fr-label" for="search-1675-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1675-input-messages" placeholder="Rechercher" id="search-1675-input" type="search">
<div class="fr-messages-group" id="search-1675-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1682" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1678" aria-labelledby="button-1679">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1678" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1683" 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-1684">accès direct nav-1684</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1685">accès direct nav-1685</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1686">accès direct nav-1686</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1687">accès direct nav-1687</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-1697" aria-haspopup="menu" id="button-1698" 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-1697" aria-labelledby="button-1698">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-1697" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1700" 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-1701">accès direct nav-1701</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1702">accès direct nav-1702</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1703">accès direct nav-1703</a>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1704">accès direct nav-1704</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-1850" id="button-1851" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-1852" aria-haspopup="menu" id="button-1853" 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" href="[url - à modifier]">
Créer un espace
</a>
</li>
<li>
<a class="fr-link fr-icon-lock-line" href="[url - à modifier]">
Se connecter
</a>
</li>
<li>
<a class="fr-link fr-icon-account-line" href="[url - à modifier]">
S’enregistrer
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-1850">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-link--close fr-link" aria-controls="modal-1850">Fermer</button>
<div class="fr-search-bar" id="search-1849" role="search">
<label class="fr-label" for="search-1849-input">
Rechercher
</label>
<input class="fr-input" aria-describedby="search-1849-input-messages" placeholder="Rechercher" id="search-1849-input" type="search">
<div class="fr-messages-group" id="search-1849-input-messages" aria-live="assertive">
</div>
<button class="fr-btn" id="search-btn-1856" title="Rechercher">
Rechercher
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-1852" aria-labelledby="button-1853">
<div class="fr-container">
<button class="fr-link--close fr-link" aria-controls="modal-1852">Fermer</button>
<div class="fr-header__menu-links">
</div>
<nav class="fr-nav" id="navigation-1854" 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-1858">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1858">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1859">Lien de navigation nav-1859</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1860">Lien de navigation nav-1860</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1861">Lien de navigation nav-1861</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1862">Lien de navigation nav-1862</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1863">Lien de navigation nav-1863</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1864">Lien de navigation nav-1864</a>
</li>
<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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1868">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1868">
<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-1868" 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">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">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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1885">Lien de navigation nav-1885</a>
</li>
<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" aria-current="page">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>
</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<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>
<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>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1901">accès direct nav-1901</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1903" aria-current="true">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1903">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1904">Lien de navigation nav-1904</a>
</li>
<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" aria-current="page">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>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1913">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1913">
<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-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">
<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-1914" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1915">Lien de navigation nav-1915</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1916">Lien de navigation nav-1916</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1917">Lien de navigation nav-1917</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1918">Lien de navigation nav-1918</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1919">Lien de navigation nav-1919</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1920">Lien de navigation nav-1920</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1921">Lien de navigation nav-1921</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1922">Lien de navigation nav-1922</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1923">Lien de navigation nav-1923</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1924">Lien de navigation nav-1924</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1925">Lien de navigation nav-1925</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1926">Lien de navigation nav-1926</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1927">Lien de navigation nav-1927</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1928">Lien de navigation nav-1928</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1929">Lien de navigation nav-1929</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1930">Lien de navigation nav-1930</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1931">Lien de navigation nav-1931</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1932">Lien de navigation nav-1932</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1933" aria-current="page">Lien de navigation nav-1933</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1934">Lien de navigation nav-1934</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1935">Lien de navigation nav-1935</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1936">Lien de navigation nav-1936</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1937">Lien de navigation nav-1937</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1938">Lien de navigation nav-1938</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1939">Lien de navigation nav-1939</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1940">Lien de navigation nav-1940</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1941">Lien de navigation nav-1941</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1942">Lien de navigation nav-1942</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1943">Lien de navigation nav-1943</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1944">Lien de navigation nav-1944</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1945">Lien de navigation nav-1945</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1946">Lien de navigation nav-1946</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<a class="fr-nav__link" href="#" target="_self" id="nav-1947">accès direct nav-1947</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1949">Entrée mega menu</button>
<div class="fr-collapse fr-mega-menu" id="collapse-1949">
<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-1949" 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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1950">Lien de navigation nav-1950</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1951">Lien de navigation nav-1951</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1952">Lien de navigation nav-1952</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1953">Lien de navigation nav-1953</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1954">Lien de navigation nav-1954</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1955">Lien de navigation nav-1955</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1956">Lien de navigation nav-1956</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1957">Lien de navigation nav-1957</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1958">Lien de navigation nav-1958</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1959">Lien de navigation nav-1959</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1960">Lien de navigation nav-1960</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1961">Lien de navigation nav-1961</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1962">Lien de navigation nav-1962</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1963">Lien de navigation nav-1963</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1964">Lien de navigation nav-1964</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1965">Lien de navigation nav-1965</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1966">Lien de navigation nav-1966</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1967">Lien de navigation nav-1967</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1968" aria-current="page">Lien de navigation nav-1968</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1969">Lien de navigation nav-1969</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1970">Lien de navigation nav-1970</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1971">Lien de navigation nav-1971</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1972">Lien de navigation nav-1972</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1973">Lien de navigation nav-1973</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">Nom de catégorie</a>
</h5>
<ul class="fr-mega-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1974">Lien de navigation nav-1974</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1975">Lien de navigation nav-1975</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1976">Lien de navigation nav-1976</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1977">Lien de navigation nav-1977</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1978">Lien de navigation nav-1978</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1979">Lien de navigation nav-1979</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1980">Lien de navigation nav-1980</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1981">Lien de navigation nav-1981</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="collapse-1983">Entrée menu</button>
<div class="fr-collapse fr-menu" id="collapse-1983">
<ul class="fr-menu__list">
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1984">Lien de navigation nav-1984</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1985">Lien de navigation nav-1985</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1986">Lien de navigation nav-1986</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1987">Lien de navigation nav-1987</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1988">Lien de navigation nav-1988</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1989">Lien de navigation nav-1989</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1990">Lien de navigation nav-1990</a>
</li>
<li>
<a class="fr-nav__link" href="#" target="_self" id="nav-1991">Lien de navigation nav-1991</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>