En-tête - Header
L’en-tête permet aux utilisateurs d’identifier sur quel site ils se trouvent. Il peut donner accès à la recherche et à certaines pages ou fonctionnalités clés.
En-tête minimale
Un header minimal est composé d’un logo textuel et d’un titre.
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro"Résultat
Ministère du Travail
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</header>En-tête avec un logo sur deux lignes
Le texte du logo peut être sur deux lignes en ajoutant une classe CSS personnalisée
Code
= dsfr_header logo_text: "Ministère \ndu Travail", title: "Égapro", classes: ["logo-pre-line"]
:css
.logo-pre-line .fr-logo {
white-space: pre-line;
}Résultat
Ministère du Travail
<header class="fr-header logo-pre-line" role="banner">
<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">
Ministère
du Travail
</p>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<style>
.logo-pre-line .fr-logo {
white-space: pre-line;
}
</style>En-tête avec logo horizontal
Un header peut présenter un logo horizontal. L’alternative textuelle du logo (attribut alt) doit impérativement contenir le texte présent dans l’image.
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro" do |header|
- header.with_operator_image title: "beta.gouv.fr", src: "https://beta.gouv.fr/assets/additional/images/logo-betagouvfr.svg", alt: "logo de beta.gouv.fr"
- header.with_tool_link title: "Comment ça marche", path: "#comment-ca-marche"
- header.with_tool_link title: "Contact", path: "#contact", classes: ["fr-icon-mail-line"]Résultat
Ministère du Travail
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
<div class="fr-header__operator">
<a href="/" title="beta.gouv.fr">
<img class="fr-responsive-img" src="https://beta.gouv.fr/assets/additional/images/logo-betagouvfr.svg" alt="logo de beta.gouv.fr" style="max-width:9.0625rem;">
</a>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a href="#comment-ca-marche" class="fr-btn">
Comment ça marche
</a>
</li>
<li>
<a href="#contact" class="fr-btn fr-icon-mail-line">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<!-- this seems to get autopopulated with the tool links with JS -->
</div>
</div>
</div>
</header>En-tête avec des accès rapides
Un header peut présenter des liens d’accès rapide (tool links dans le code).
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro", tagline: "Indice de parité professionelle" do |header|
- header.with_tool_link title: "Comment ça marche", path: "#comment-ca-marche"
- header.with_tool_link title: "Contact", path: "#contact", classes: ["fr-icon-mail-line"]Résultat
Ministère du Travail
Égapro
Indice de parité professionelle
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
<p class="fr-header__service-tagline">
Indice de parité professionelle
</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a href="#comment-ca-marche" class="fr-btn">
Comment ça marche
</a>
</li>
<li>
<a href="#contact" class="fr-btn fr-icon-mail-line">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<!-- this seems to get autopopulated with the tool links with JS -->
</div>
</div>
</div>
</header>En-tête avec des liens directs
Un header peut présenter des liens directs (direct links dans le code).
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro", tagline: "Indice de parité professionelle" do |header|
- header.with_direct_link_simple title: "Comment ça marche", path: "#comment-ca-marche"
- header.with_direct_link_simple title: "Contact", path: "#contact"Résultat
Ministère du Travail
Égapro
Indice de parité professionelle
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
<p class="fr-header__service-tagline">
Indice de parité professionelle
</p>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<!-- this seems to get autopopulated with the tool links with JS -->
</div>
<nav class="fr-nav" id="navigation-direct-links" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a href="#comment-ca-marche" class="fr-nav__link" target="_self">
Comment ça marche
</a>
</li>
<li class="fr-nav__item">
<a href="#contact" class="fr-nav__link" target="_self">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>En-tête avec des liens déroulants
Un header peut présenter des liens directs déroulants (dropdown dans le code).
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro", tagline: "Indice de parité professionelle" do |header|
= header.with_direct_link_dropdown title: "Aide" do |dropdown|
= dropdown.with_link title: "Comment ça marche", path: "#comment-ca-marche"
= dropdown.with_link title: "Contact", path: "#contact"
= header.with_direct_link_dropdown title: "Environnement" do |dropdown|
= dropdown.with_link title: "Beta Gouv", path: "#beta-gouv"
= dropdown.with_link title: "DSFR", path: "#dsfr"Résultat
Ministère du Travail
Égapro
Indice de parité professionelle
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
<p class="fr-header__service-tagline">
Indice de parité professionelle
</p>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<!-- this seems to get autopopulated with the tool links with JS -->
</div>
<nav class="fr-nav" id="navigation-direct-links" 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="menu-aide">
Aide
</button>
<div class="fr-collapse fr-menu" id="menu-aide">
<ul class="fr-menu__list">
<li>
<a href="#comment-ca-marche" class="fr-nav__link" target="_self">
Comment ça marche
</a>
</li>
<li>
<a href="#contact" class="fr-nav__link" target="_self">
Contact
</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-environnement">
Environnement
</button>
<div class="fr-collapse fr-menu" id="menu-environnement">
<ul class="fr-menu__list">
<li>
<a href="#beta-gouv" class="fr-nav__link" target="_self">
Beta Gouv
</a>
</li>
<li>
<a href="#dsfr" class="fr-nav__link" target="_self">
DSFR
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>En-tête avec un méga menu
Le méga menu n’est pas encore développé dans cette gem.
En-tête avec un champ de recherche
Un header peut présenter un champ de recherche.
Le formulaire de recherche est à implémenter vous-même.
La classe .fr-search-bar peut être utilisée pour faciliter l’implémentation d’un formulaire en ligne avec le bouton submit sur la droite.
Dans cet exemple nous codons le formulaire en HAML brut, mais vous pouvez utiliser les helpers de Rails comme form_for.
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro", tagline: "Indice de parité professionelle" do |header|
- header.with_search do
%form
.fr-search-bar(role="search")
%label.fr-label(for="nom") Rechercher une entreprise
%input.fr-input(type="text" name="nom" id="nom" placeholder="Nom de l’entreprise")
%button.fr-btn(type="submit")Résultat
Ministère du Travail
Égapro
Indice de parité professionelle
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-header-search" id="button-header-search" title="Rechercher">
Rechercher
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
<p class="fr-header__service-tagline">
Indice de parité professionelle
</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__search fr-modal" id="modal-header-search">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-search" title="Fermer">
Fermer
</button>
<div role="search" id="header-search">
<form>
<div class='fr-search-bar' role='search'>
<label class='fr-label' for='nom'>
Rechercher une entreprise
</label>
<input class='fr-input' id='nom' name='nom' placeholder='Nom de l’entreprise' type='text'>
<button class='fr-btn' type='submit'>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>En-tête avec toutes les fonctionnalités
Cet exemple regroupe toutes les fonctionnalités d’un header.
Code
= dsfr_header logo_text: "Ministère du Travail", title: "Égapro", tagline: "Indice de parité professionelle" do |header|
- header.with_tool_link title: "Connexion", path: "#connexion"
- header.with_tool_link title: "FAQ", path: "#FAQ", classes: ["fr-icon-question-line"]
- header.with_direct_link_simple title: "Comment ça marche", path: "#comment-ca-marche"
= header.with_direct_link_dropdown title: "Environnement" do |dropdown|
= dropdown.with_link title: "Beta Gouv", path: "#beta-gouv"
= dropdown.with_link title: "DSFR", path: "#dsfr"
- header.with_direct_link_simple title: "Contact", path: "#contact"
- header.with_search do
%form
.fr-search-bar(role="search")
%label.fr-label(for="nom") Rechercher une entreprise
%input.fr-input(type="text" name="nom" id="nom" placeholder="Nom de l’entreprise")
%button.fr-btn(type="submit")Résultat
<header class="fr-header" role="banner">
<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">
Ministère du Travail
</p>
</div>
<div class="fr-header__navbar">
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-header-search" id="button-header-search" title="Rechercher">
Rechercher
</button>
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
Menu
</button>
</div>
</div>
<div class="fr-header__service">
<a href="/" title="Accueil - Égapro">
<p class="fr-header__service-title">
Égapro
</p>
</a>
<p class="fr-header__service-tagline">
Indice de parité professionelle
</p>
</div>
</div>
<div class="fr-header__tools">
<div class="fr-header__tools-links">
<ul class="fr-btns-group">
<li>
<a href="#connexion" class="fr-btn">
Connexion
</a>
</li>
<li>
<a href="#FAQ" class="fr-btn fr-icon-question-line">
FAQ
</a>
</li>
</ul>
</div>
<div class="fr-header__search fr-modal" id="modal-header-search">
<div class="fr-container fr-container-lg--fluid">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-search" title="Fermer">
Fermer
</button>
<div role="search" id="header-search">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-environnement">
Environnement
</button>
<div class="fr-collapse fr-menu" id="menu-environnement">
<ul class="fr-menu__list">
<li>
<a href="#beta-gouv" class="fr-nav__link" target="_self">
Beta Gouv
</a>
</li>
<li>
<a href="#dsfr" class="fr-nav__link" target="_self">
DSFR
</a>
</li>
</ul>
</div>
<form>
<div class='fr-search-bar' role='search'>
<label class='fr-label' for='nom'>
Rechercher une entreprise
</label>
<input class='fr-input' id='nom' name='nom' placeholder='Nom de l’entreprise' type='text'>
<button class='fr-btn' type='submit'>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu">
<div class="fr-container">
<button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
Fermer
</button>
<div class="fr-header__menu-links">
<!-- this seems to get autopopulated with the tool links with JS -->
</div>
<nav class="fr-nav" id="navigation-direct-links" role="navigation" aria-label="Menu principal">
<ul class="fr-nav__list">
<li class="fr-nav__item">
<a href="#comment-ca-marche" class="fr-nav__link" target="_self">
Comment ça marche
</a>
</li>
<li class="fr-nav__item">
<button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-environnement">
Environnement
</button>
<div class="fr-collapse fr-menu" id="menu-environnement">
<ul class="fr-menu__list">
<li>
<a href="#beta-gouv" class="fr-nav__link" target="_self">
Beta Gouv
</a>
</li>
<li>
<a href="#dsfr" class="fr-nav__link" target="_self">
DSFR
</a>
</li>
</ul>
</div>
</li>
<li class="fr-nav__item">
<a href="#contact" class="fr-nav__link" target="_self">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>