--- boost: 0 sitemap: noindex: true title: Code de l'En-tête shortTitle: Code de l'En-tête description: Mise à disposition des extraits de code, de l’API et de la documentation technique du composant En-tête. shortDescription: Identification du site et accès rapides keywords: en-tête, header, marque, recherche, navigation, DSFR, accessibilité, interface cover: ../_asset/cover/cover.png excerpt: Le composant En-tête est positionné en haut de chaque page et permet à l’usager de savoir sur quel site il se trouve, tout en facilitant l’accès aux fonctions principales comme la recherche ou la connexion. summary: Ce composant structure la zone supérieure de chaque page d’un site public. Il intègre les éléments d’identité visuelle de l’État, les éventuels accès rapides à des fonctions essentielles, et le moteur de recherche. Non personnalisable, l’en-tête garantit cohérence, lisibilité et conformité avec la charte de l’État, en version desktop comme mobile. Il peut être enrichi ou simplifié selon les besoins du site. mesh: - component/navigation - component/footer --- ## 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. :::dsfr-doc-tab-navigation - [Présentation](../index.md) - [Démo](../demo/index.md) - [Design](../design/index.md) - Code - [Accessibilité](../accessibility/index.md) ::: ### 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 `
` 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 `
` défini par la classe `fr-header__body`. - Ce bloc doit contenir un élément HTML `
` 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 `
` défini par la classe `fr-header__body-row`, contenant : - Un conteneur du bloc marque (voir [Marque de l'état](https://www.info.gouv.fr/marque-de-letat)), un élément HTML `
` 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 `
` de classes `fr-header__brand-top` contenant : - À minima le bloc marque dans un élément HTML `
` de classes `fr-header__logo`, il s'agit du composant [Bloc-marque de l'état](../../../../logo/_part/doc/code/index.md) 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 `
` 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 `
` de classe `fr-header__service`. - Le lien `` 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 `

` défini par la classe `fr-header__service-title` contenant le "nom de service". - Une description, optionnelle, dans un paragraphe `

` défini par la classe `fr-header__service-tagline`. - Un bloc d'accès rapides, optionnel, dans un élément HTML `

` 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 `
` de classes `fr-header__tools-links`, il s'agit d'un élément HTML `
``` ::: --- ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top multiline=true} | Dépendance | Obligatoire | Remarque | |------------|-------------| ---------| | Core | Oui | | | Logo | Oui | | | Header | Oui | | | Button | Non | Si utilisation de boutons, ou d'une barre de recherche | | Navigation | Non | Si utilisation d'une navigation principale | | Search | Non | Si utilisation d'une barre de recherche | | Link | Non | Si utilisation de liens d'accès rapide | | Translate | Non | Si utilisation d'un sélecteur de langue | | Modal | Non | Si utilisation d'un des 4 éléments précédents, qui s'ouvrent dans une modale en mobile | ::: **Exemple d'imports CSS** ```html ``` #### Variante sans navigation Le composant en-tête peut être utilisé sans navigation. **Exemple de variante sans navigation** :::fr-accordion[Déplier pour voir le code]{id=header-sans-navigation} ```HTML ``` ::: #### 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** :::fr-accordion[Déplier pour voir le code]{id=header-avec-raccourcis} ```HTML ``` ::: #### 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** :::fr-accordion[Déplier pour voir le code]{id=header-avec-selecteur-de-langues} ```HTML ``` ::: #### 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** :::fr-accordion[Déplier pour voir le code]{id=header-avec-selecteur-de-langues-et-parametre-affichage} ```HTML ``` ::: #### 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** :::fr-accordion[Déplier pour voir le code]{id=header-avec-logo-operateur-et-recherche} ```HTML ``` ::: #### 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** :::fr-accordion[Déplier pour voir le code]{id=header-avec-logo-operateur-horizontal-et-service-et-acces-rapide-et-recherche} ```HTML ``` ::: #### 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** :::fr-accordion[Déplier pour voir le code]{id=header-avec-badge-beta} ```HTML ``` ::: #### 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](https://developer.mozilla.org/fr/docs/Glossary/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](path:/getting-started/developer/javascript)). > [!WARNING] > 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** :::fr-accordion[Déplier pour voir le code]{id=header-spa} ```HTML ``` ::: #### 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 `` l’attribut `data-fr-mourning`. La Marianne s’affichera alors dans sa version en berne. **Exemple de variante deuil national** ```HTML ``` --- ### JavaScript En dehors de la version minimal, les versions avec navigation, avec liens d'accès rapides, avec barre de recherche, ou avec sélecteur de langues, nécessitent l'utilisation de JavaScript pour l'ouverture de modales en mobile. #### Installation du JavaScript Pour fonctionner correctement, le JavaScript du composant et de ses dépendances doivent être importés. L'import doit se faire à la fin de la page, avant la balise ``, et de préférence avec les fichiers minifiés, car plus légers. :::fr-table[Dépendances JS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Navigation | Oui | | Modal | Oui | | Header | Oui | ::: **Exemple d'imports JavaScript** ```HTML ``` NB: Il est aussi possible d'importer le Js global du DSFR `dsfr.module.min.js` Pour fonctionner sur Internet Explorer 11, des fichiers legacy, en version nomodule ES5, peuvent aussi être importés : ```HTML ``` Une fois le JavaScript chargé, le composant fonctionne automatiquement. #### SPA Afin d'éviter une duplication du code HTML et d'alourdir les snippets de code, le DSFR duplique et injecte automatiquement en JavaScript les éléments d'accès rapide présents dans le conteneur `fr-header__tools-links` vers le conteneur `fr-header__menu-links` de la modale de navigation principale en mobile. Dans le cadre de l'utilisation du DSFR dans un contexte de Single-page application (Angular, Vue, React, etc..), il peut être nécessaire d'effectuer la recopie des éléments placés dans `fr-header__tools-links` au sein de la modale de navigation principale en mobile **avant** d’exécuter les scripts du DSFR, afin que ces éléments soient pris en compte par votre Framework. Les modes `vue`, `angular`, `react` de [l'API Javascript du DSFR](path:/getting-started/developer/javascript#mode) permettent de désactiver les manipulation du DOM par le DSFR et de lancer manuellement le script du DSFR après le chargement de la SPA avec `dsfr.start()`. #### 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 : ```js 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 :::fr-table[isEnabled]{valign=top multiline=true} | | | |------|-----| | **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` | ::: :::fr-table[node]{valign=top multiline=true} | | | |------|-----| | **Description** | Renvoie le noeud HTML de l'élément. | | **Type** | property | | **Retour** | DOMElement | | **Exemple** | `dsfr(elem).headerModal.node` | ::: ###### modal & modalButton voir [Modale](../../../../modal/_part/doc/code/index.md#api) #### É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](path:/getting-started/developer/javascript). En version mobile, sur la modale de navigation principale, les événements suivants sont disponibles : :::fr-table[événements]{valign=top multiline=true caption=false} | É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](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+header+) ::dsfr-doc-changelog