En-tête

L’en-tête est un élément de navigation permettant aux usagers d’identifier sur quel site ils se trouvent et de leur donner un accès simplifié au moteur de recherche et à certaines pages ou fonctionnalités clés du site.

HTML

Structure du composant

Le composant 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.

Il est constitué d'un élément HTML <header> de classe fr-header, avec l'attribut role="banner" contenant :

Un premier conteneur du corps de l'en-tête, est un élément HTML <div> défini par la classe fr-header__body.
- Ce bloc doit contenir un élément HTML <div> de classe fr-container qui permet de centrer le contenu.
- Un bloc de ligne de corps de l'en-tête, un élément HTML <div> défini par la classe fr-header__body-row, contenant :
  - Un conteneur du bloc marque (voir Marque de l'état ), un élément HTML <div> de classes fr-header__brand et fr-enlarge-link pour étendre le lien à l’ensemble du bloc-marque et pouvant comporter deux sous-conteneurs :
    - Un conteneur de la partie supérieure, obligatoire, un élément HTML <div> de classes fr-header__brand-top contenant :
      - À minima le bloc marque dans un élément HTML <div> de classes fr-header__logo, il s'agit du composant Bloc-marque de l'état de classe fr-logo.
      - Il peut aussi contenir un logo opérateur de l'État, une image (ou SVG) contenue dans un élément HTML <div> de classe fr-header__operator.
        
        Utiliser un attribut style="max-width:10rem;", avec comme valeur la largeur max du logo en fonction de son format (10rem pour du 16:9).
        
        L'attribut alt doit être renseigné avec le nom de l'opérateur.
        
        Le lien pointant vers l'accueil est alors positionné au niveau du logo de l'opérateur, il est automatiquement étendu à toute la zone du bloc marque.
        
        L'attribut title du lien doit être renseigné sous la forme "Retour à l’accueil du site - [texte alternatif de l’image (nom de l'opérateur ou du site serviciel)] - République Française".
    - Et un bloc nom de service et description, optionnel, dans un élément HTML <div> de classe fr-header__service. - Le lien <a> dont l'attribut title doit être renseigné sous la forme "Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" est alors placé sur le paragraphe <p> défini par la classe fr-header__service-title contenant le "nom de service". - Une description, optionnelle, dans un paragraphe <p> défini par la classe fr-header__service-tagline.
  - Un bloc d'accès rapides, optionnel, dans un élément HTML <div> de classes fr-header__tools et pouvant contenir :
    - La liste de liens d'accès rapides, optionnelle, est placée dans un élément HTML <div> de classes fr-header__tools-links, il s'agit d'un élément HTML <ul> de classes fr-btns-group (voir Groupes de boutons ) contenant des liens, comme par exemple la connexion à un espace sécurisé et limité à 3 accès rapides maximum.
    - La barre de recherche, optionnelle, est placée dans un élément HTML <div> de classes fr-header__search (voir Barre de recherche ) et fr-modal pour s'afficher dans une modale en mobile (voir Modale ).
    - Le sélecteur de langue, optionnel, est placé à la suite des liens d'accès rapides (voir Sélecteur de langue ).
    - Le bouton des paramètres d'affichage, optionnels, est placé à la suite des liens d'accès rapides et avant le sélecteur de langue (voir Paramètre d'affichage ).
  - Le conteneur de la navigation principale mobile, dans un élément HTML <div> de classes fr-header__navbar pouvant contenir :
    - Le bouton d'ouverture, obligatoire, du menu principale en mobile, un élément HTML <button> de type button défini par les classes fr-btn et fr-btn--menu.
      - Le bouton dispose d'un attribut data-fr-opened, sa valeur [true|false] défini si le bloc refermable de la navigation est ouvert ou fermé.
      - Le bouton est lié au bloc refermable via l'attribut aria-controls, sa valeur doit correspondre à l'attribut id du bloc refermable.
    - Le bouton d'ouverture de la modale de recherche en mobile, optionnel, un élément HTML <button> de type button défini par les classes fr-btn et fr-btn--search.
      - Le bouton dispose d'un attribut data-fr-opened, sa valeur [true|false] défini si la modale de recherche est ouverte ou fermée.
      - Le bouton est lié à la modale de recherche via l'attribut aria-controls, sa valeur doit correspondre à l'attribut id de la modale de recherche.
Un second conteneur, de la navigation principale de l'en-tête dans un élément HTML <div> défini par les classes fr-header__menu et fr-modal, pour s'afficher dans une modale en mobile (voir Modale ).
- La modale de la navigation principale de l'en-tête contient un premier conteneur des liens d'accès rapides, un élément HTML <div> défini par la classe fr-header__menu-links, laissée vide et servant à dupliquer en Javascript pour le mobile les liens contenus dans la balise définie par la classe fr-header__tools-links.
- La navigation principale de l'en-tête est contenue dans un élément HTML <nav> défini par la classe fr-nav (voir Navigation principale ).

Exemple de structure minimale

<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 data-fr-opened="false" aria-controls="modal-header" title="Menu" type="button" id="button-header" class="fr-btn--menu fr-btn">Menu</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-header" aria-labelledby="button-header">
        <div class="fr-container">
            <button aria-controls="modal-header" title="Fermer" type="button" id="button-2168" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core de l'en-tête doivent être importés.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/header/header.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/header/header.legacy.min.css" rel="stylesheet">

Le composant en-tête peut être utilisé sans navigation.

Exemple de variante sans navigation

<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>

Variante avec une liste de raccourcis

Le composant en-tête peut être utilisé avec une liste de raccourcis.

Exemple de variante avec une liste de raccourcis

<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 data-fr-opened="false" aria-controls="modal-nav" title="Menu" type="button" id="button-menu" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
                            </li>
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
                            </li>
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-nav" aria-labelledby="button-menu">
        <div class="fr-container">
            <button aria-controls="modal-nav" title="Fermer" type="button" id="button-2188" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
        </div>
    </div>
</header>

Variante avec selecteur de langues

Le composant en-tête peut être utilisé avec le selecteur de langues.

Exemple de variante avec selecteur de langues

<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 data-fr-opened="false" aria-controls="modal-nav" title="Menu" type="button" id="button-menu" class="fr-btn--menu fr-btn">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">
                        <nav role="navigation" class="fr-translate fr-nav">
                            <div class="fr-nav__item">
                                <button aria-controls="translate" aria-expanded="false" type="button" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg">&nbsp;- Français</span>
                                </button>
                                <div class="fr-collapse fr-translate__menu fr-menu" id="translate">
                                    <ul class="fr-menu__list">
                                        <li>
                                            <a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" aria-current="true">FR - Français</a>
                                        </li>
                                        <li>
                                            <a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="/en/">EN - English</a>
                                        </li>
                                        <li>
                                            <a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/">ES - Español</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-nav" aria-labelledby="button-menu">
        <div class="fr-container">
            <button aria-controls="modal-nav" title="Fermer" type="button" id="button-2188" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
        </div>
    </div>
</header>

Variante avec selecteur de langues et paramètre d'affichage

Le composant en-tête peut être utilisé avec le selecteur de langues et paramètre d'affichage.

Exemple de variante avec selecteur de langues et paramètre d'affichage

<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 data-fr-opened="false" aria-controls="modal-nav" title="Menu" type="button" id="button-menu" class="fr-btn--menu fr-btn">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">
                        <button aria-controls="fr-theme-modal" data-fr-opened="false" type="button" class="fr-icon-theme-fill fr-btn--icon-left fr-btn fr-btn">Paramètres d'affichage</button>
                        <nav role="navigation" class="fr-translate fr-nav">
                            <div class="fr-nav__item">
                                <button aria-controls="translate" aria-expanded="false" type="button" class="fr-translate__btn fr-btn">FR<span class="fr-hidden-lg">&nbsp;- Français</span>
                                </button>
                                <div class="fr-collapse fr-translate__menu fr-menu" id="translate">
                                    <ul class="fr-menu__list">
                                        <li>
                                            <a class="fr-translate__language fr-nav__link" hreflang="fr" lang="fr" href="/fr/" aria-current="true">FR - Français</a>
                                        </li>
                                        <li>
                                            <a class="fr-translate__language fr-nav__link" hreflang="en" lang="en" href="/en/">EN - English</a>
                                        </li>
                                        <li>
                                            <a class="fr-translate__language fr-nav__link" hreflang="es" lang="es" href="/es/">ES - Español</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-nav" aria-labelledby="button-menu">
        <div class="fr-container">
            <button aria-controls="modal-nav" title="Fermer" type="button" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
        </div>
    </div>
</header>

Variante avec logo opérateur vertical, recherche

Le composant en-tête peut être utilisé avec un logo opérateur vertical et la barre de recherche.

Exemple de variante avec logo opérateur vertical, recherche

<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="max-width:3.5rem;" src="../../../example/img/placeholder.3x4.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 data-fr-opened="false" aria-controls="modal-search" title="Rechercher" type="button" id="button-search" class="fr-btn--search fr-btn">Rechercher</button>
                            <button data-fr-opened="false" aria-controls="modal-nav" title="Menu" type="button" id="button-menu" class="fr-btn--menu fr-btn">Menu</button>
                        </div>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__search fr-modal" id="modal-search" aria-labelledby="button-search">
                        <div class="fr-container fr-container-lg--fluid">
                            <button aria-controls="modal-search" title="Fermer" type="button" class="fr-btn--close fr-btn">Fermer</button>
                            <div class="fr-search-bar" role="search">
                                <label class="fr-label" for="search-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" aria-describedby="search-input-messages" placeholder="Rechercher" id="search-input" type="search">
                                <div class="fr-messages-group" id="search-input-messages" aria-live="polite">
                                </div>
                                <button title="Rechercher" type="button" class="fr-btn">Rechercher</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-nav" aria-labelledby="button-menu">
        <div class="fr-container">
            <button aria-controls="modal-nav" title="Fermer" type="button" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Variante avec logo opérateur horizontal, nom de service, lien d’accès, recherche

Le composant en-tête peut être utilisé avec un logo opérateur horizontal, nom de service, lien d’accès et la barre de recherche.

Exemple de variante avec logo opérateur horizontal, nom de service, lien d’accès, recherche

<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:8rem;" 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 data-fr-opened="false" aria-controls="modal-search" title="Rechercher" type="button" id="button-search" class="fr-btn--search fr-btn">Rechercher</button>
                            <button data-fr-opened="false" aria-controls="modal-nav" title="Menu" type="button" id="button-menu" class="fr-btn--menu fr-btn">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 href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
                            </li>
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
                            </li>
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
                            </li>
                        </ul>
                    </div>
                    <div class="fr-header__search fr-modal" id="modal-search" aria-labelledby="button-search">
                        <div class="fr-container fr-container-lg--fluid">
                            <button aria-controls="modal-search" title="Fermer" type="button" class="fr-btn--close fr-btn">Fermer</button>
                            <div class="fr-search-bar" role="search">
                                <label class="fr-label" for="search-input">
                                    Rechercher
                                </label>
                                <input class="fr-input" aria-describedby="search-input-messages" placeholder="Rechercher" id="search-input" type="search">
                                <div class="fr-messages-group" id="search-input-messages" aria-live="polite">
                                </div>
                                <button title="Rechercher" type="button" class="fr-btn">Rechercher</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-nav" aria-labelledby="button-menu">
        <div class="fr-container">
            <button aria-controls="modal-nav" title="Fermer" type="button" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
            </div>
            <nav class="fr-nav" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                    <li class="fr-nav__item">
                        <a type="link" href="#" class="fr-nav__link">accès direct</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

Variante avec badge BETA

Le composant en-tête peut être utilisé avec un badge "BETA" accolé au nom du site / service.

Exemple de variante avec badge 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">
                            <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
                                <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>
        </div>
    </div>
</header>

Variante avec raccourcis dupliqués, pour Angular, React et Vue

Dans le cadre de l'utilisation du DSFR dans un contexte de Single-page application ( SPA ) l'API du DSFR permet de désactiver la recopie Javascript des raccourcis dans la modale de navigation principale en mobile avec l'utilisation des modes mis à disposition à l'instanciation de l'API JS du DSFR (voir API Javascript du DSFR ).

Attention

Il faudra dupliquer manuellement les liens et boutons présents dans le bloc d'accès rapide défini par la classe fr-header__tools-links dans le conteneur prévu à cet effet dans la modale mobile de la navigation principale défini par la classe fr-header__menu-links. Pensez à modifier les id.

Exemple de variante 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 data-fr-opened="false" aria-controls="modal-menu" title="Menu" type="button" id="button-menu" class="fr-btn--menu fr-btn">Menu</button>
                        </div>
                    </div>
                </div>
                <div class="fr-header__tools">
                    <div class="fr-header__tools-links">
                        <ul class="fr-btns-group">
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--team fr-btn">Contact</a>
                            </li>
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--briefcase fr-btn">Espace recruteur</a>
                            </li>
                            <li>
                                <a href="[url - à modifier]" class="fr-btn--account fr-btn">Espace particulier</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-menu" aria-labelledby="button-menu">
        <div class="fr-container">
            <button aria-controls="modal-menu" title="Fermer" type="button" class="fr-btn--close fr-btn">Fermer</button>
            <div class="fr-header__menu-links">
                <ul class="fr-btns-group">
                    <li>
                        <a href="[url - à modifier]" class="fr-btn--team fr-btn fr-btn">Contact</a>
                    </li>
                    <li>
                        <a href="[url - à modifier]" class="fr-btn--briefcase fr-btn fr-btn">Espace recruteur</a>
                    </li>
                    <li>
                        <a href="[url - à modifier]" class="fr-btn--account fr-btn fr-btn">Espace particulier</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>

Variante deuil national

Lors des périodes de deuil national, il est possible d’utiliser la version en berne de l'en-tête, en ajoutant à la balise <html> l’attribut data-fr-mourning. La Marianne s’affichera alors dans sa version en berne.

Exemple de variante deuil national

<html lang="fr" data-fr-mourning>

JavaScript

Pour fonctionner le composant en-tête nécessite l'utilisation de JavaScript. Chaque composant utilisant javascript possède un fichier Js spécifique et requiert le fichier Js du core.

Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) :

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/header/header.module.min.js"></script>

NB: Il est aussi possible d'importer le Js global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé :

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/header/header.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

Instances

Sur l'en-tête', les éléments suivants sont instanciés :

Le conteneur principal, via la classe : fr-header.
Le conteneur des liens d'accès direct, via la classe : fr-header__tools-links.
Le conteneur des liens d'accès direct dans la modale de la navigation principale en mobile, via la classe : fr-header__menu-links.
Les boutons et liens d'accès direct, via les classes fr-header__tools-links et fr-btns-group ou fr-links-group.
Les modales de la barre de recherche et de la navigation principale en mobile, via les classes fr-header__search plus fr-modal et fr-header__menu plus fr-modal.

Une fois chargé, le Js ajoute un attribut data-fr-js-NOM_INSTANCE="true" sur chacun des éléments instanciés.

API

Il est possible d'interagir avec les instances du composants en JavaScript via une API.

Cette API est disponible depuis la méthode window.dsfr(instance) du core.

Exemple :

const elem = document.getElementById('ID_SOUS_SECTION');
dsfr(elem).collapse.disclose();

L'ensemble des propriétés et méthodes disponibles sont définies ci-après :

headerModal

isEnabled
Description	Défini si le fonctionnement de la modale de navigation principale mobile est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).headerModal.isEnabled = false`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).headerModal.node`

voir Modale

Événements

Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l' API Javascript .

En version mobile, sur la modale de navigation principale, les événements suivants sont disponibles :

événements
Événement	Action	Élément	Attribut
`dsfr.conceal`	Fermeture de la modale	Modal	`data-fr-js-modal`
`dsfr.disclose`	Ouverture de la modale	Modal	`data-fr-js-modal`
`dsfr.click`	Click sur le bouton d'ouverture	ModalButton	`data-fr-js-modal-button`

Note de version

Voir les évolutions sur github

v1.13.1 - 26 mars 2025

correctif template ejs

Correctif des variables des templates sidemenu, navigation, header

🐛 fix

sidemenu

navigation

header

#1073

v1.13.0 - 4 décembre 2024

retrait aria-label sur modales désactivées

En desktop, lorsque les modales de menu et recherche sont désactivés, les attributs aria-label et aria-labelledby sont retirés

🐛 fix

header

#1018

duplication aria-describedby & labelledby

Permet la duplication des attributs aria dans le menu mobile des accès rapides

🐛 fix

header

#976

correction focus croppé

Correction du focus croppé sur la navigation latérale
Correction du focus croppé sur le header en mobile

🐛 feat

header

sidemenu

#1008

v1.12.0 - 19 juin 2024

réduction de la zone de clic retour à l'accueil

sur le header mobile la partie à droite du brand n'est plus cliquable pour éviter les clics manqués sur le burger ou la recherche, et le lien du nom de service n'est plus étendu sur toute la largeur
sur le footer mobile la zone de clic n'est plus étendu sur toute la largeur

🐛 fix

footer

header

#944

v1.11.2 - 4 mars 2024

correctif erreur itérable null

corrige l'issue #890, la valeur null renvoyée par la fonction match est remplacée par un array vide pour permettre son itération

🐛 fix

header

#893

correction overflow hidden cache le focus

correction du focus caché par un overflow hidden, sur le lien du logo du header

🐛 fix

header

#881

v1.11.1 - 31 janvier 2024

corrige les alignements des liens outils

🐛 fix

header

#876

espacement des liens d'accès rapide en mobile

corrige la taille des boutons d'accès rapide dans le menu mobile

🐛 fix

header

#859

corrige le focus sur le champ de recherche

🐛 fix

header

#864

retire l'attribut aria-haspopup du bouton burger

✨ feat

header

#856

retrait de l'icone target blank

🐛 fix

footer

header

connect

#872

🐛 fix

header

#873

v1.11.0 - 11 décembre 2023

augmente le z-index du header

ajout d'un niveau d'élévation raised-over
le header passe en z-index raised-over pour passer par dessus les cartes avec ombre

🐛 fix

header

#830

ajustements header

change la couleur du menu burger en $action-high-bleu-france en mobile
passe l'écart entre bloc marque et logo opérateur à 32px et l'écart entre logo opérateur et nom du site à 32px
réduit la taille de la barre de recherche à 96v (24rem) au lieu de 25rem
bloque la taille du logo opérateur à 8rem max (144px)
passe la taille du texte de la tagline en sm (14px) au lieu de md
passe le bouton burger en tertiaire avec border

🐛 fix

header

#791

token titre service

le token de couleur du texte de service passe en text-title-grey à la place de text-default-grey

🐛 fix

header

#745

mise à jour des exemples

ajout exemple utilisateur connecté
ajoute des exemples avec un seul raccourcis (sans liste)
ajoute les modifier de bouton account briefcase et team

🐛 fix

header

#727

v1.10.0 - 19 juillet 2023

correctif régression scroll horizontal

La navigation du header créée un scroll horizontal dans la page
l'ajout d'un max-width prévient le problème

🐛 fix

header

#697

homogénéisation des espacements et indentation

Uniformisation du menu latéral, navigation, et accordéon
- ajout d'un fond open-blue-france et du texte en blue-france sur les boutons d'ouverture en état ouvert
- ajout de marge pour indenter les sous menus
- ajustement des espacements
Ajustement de la navigation du header en mobile
Ajustement de la taille max de la navigation dans le header en desktop

✨ feat

navigation

header

sidemenu

#678

duplication des id généralisée pour les quick access

L'ensemble des id présents dans les accès rapides du header doivent être suffixés par -mobile à la duplication

🐛 fix

header

#637

focus des nav-items mobile & ajustements

L'outline de focus est maintenant entièrement visible sur les liens des sous menu en mobile
Ajustement de l'alignement du bouton fermé en desktop
Retrait du mega-menu__leader vide dans les examples

🐛 fix

header

navigation

#609

v1.9.1 - 11 avril 2023

Actuellement, la navigation reste présente en mobile et en desktop lorsque l'on clique sur un lien ou un bouton qu'elle contient, ce qui pose problème dans le cas des Single-page application. La fonctionnalité est maintenant modifiée pour que tout clic sur un élément <button> ou <a> entraîne la fermeture de la navigation (modale et/ou menu). L'ajout de l'attribut data-fr-prevent-conceal permet de préserver un lien ou un bouton particulier de ce nouveau comportement.

✨ feat

header

navigation

#583

v1.9.0 - 1 mars 2023

copie du sélecteur de langue sans accès rapide

Les accès rapides sont dupliqués dans le menu mobile par le JS (sauf dans les modes SPA) En l'absence d'accès rapide, le sélecteur de langue n'était pas dupliqué comme attendu

fix

header

#547

alignement à gauche des raccourcis sans icônes

L'absence d'icône sur les accès rapides de l'En-tête provoque un alignement centré au lieu d'un alignement gauche attendu.

fix

header

#542

v1.7.0 - 21 juillet 2022

généralisation de l'attribut 'title' du lien retour/accueil du logo

fix

footer

header

#353

v1.6.0 - 14 juin 2022

correctif espacement liens rapides

fix

header

#335

correction espacements des groupes

refactor

header

link

button

tag

badge

#311

v1.5.0 - 21 avril 2022

bandeau de site en beta

feat

header

#269

v1.4.0 - 16 mars 2022

retours dépréciation

fix

header

content

#241

v1.2.1 - 29 novembre 2021

allègement hover bloc marque

fix

header

#155

corrections css pour IE, valeur initial

fix

header

#144

v1.2.0 - 17 novembre 2021

correction semicolon manquant devant last-child

fix

header

#50

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github

En-tête

HTML

Structure du composant

CSS

Installation du CSS

Variante sans navigation

Variante avec une liste de raccourcis

Variante avec selecteur de langues

Variante avec selecteur de langues et paramètre d'affichage

Variante avec logo opérateur vertical, recherche

Variante avec logo opérateur horizontal, nom de service, lien d’accès, recherche

Variante avec badge BETA

Variante avec raccourcis dupliqués, pour Angular, React et Vue

Variante deuil national

JavaScript

Instances

API

headerModal

modal & modalButton

Événements

Note de version

v1.13.1 - 26 mars 2025

v1.13.0 - 4 décembre 2024

v1.12.0 - 19 juin 2024

v1.11.2 - 4 mars 2024

v1.11.1 - 31 janvier 2024

v1.11.0 - 11 décembre 2023

v1.10.0 - 19 juillet 2023

v1.9.1 - 11 avril 2023

v1.9.0 - 1 mars 2023

v1.7.0 - 21 juillet 2022

v1.6.0 - 14 juin 2022

v1.5.0 - 21 avril 2022

v1.4.0 - 16 mars 2022

v1.2.1 - 29 novembre 2021

v1.2.0 - 17 novembre 2021

Proposer une amélioration