En-tête - Header

Attention

Les liens définis dans le composant sont actifs et risqueraient de vous rediriger en dehors de cette page.

Ce composant permet d'intégrer l'entête du système de design de l'état (DSFR). Notamment en permettant la personnalisation de différentes parties de l'entête telle que :

Le bloc-marque et l'identité du site ou du service

Bloc-marque (obligatoire)

Par défaut, le bloc-marque est configuré pour afficher le nom de l'administration `République Française`, vous pouvez néanmoins modifier le nom en utilisant l'option `logoLabel` (string|string[]), auquel chaque ligne du tableau correspondra à une ligne visuelle du bloc-marque.

En-tête avec bloc-marque par défaut

En-tête avec bloc-marque personnalisé

Identité du site ou du service (optionnel)

Vous avez la possibilité d'ajouter une identité au site ou au service, pour cela, le composant <dsmj-header> vous propose différents type de personnalisation :

Le lien intégré au bloc de l'indentité du site / service / bloc-marque pointe par défaut vers la racine du site (`/`) mais peut-être rédéfini avec l'option `brandLink` (string), il est également possible de ne pas étendre la zone cliquable sur la largeur du bloc en appliquant l'option `brandLinkEnlarge` (boolean) à `false`, la valeur par défaut étant à `true`.

Bloc à outils (optionnel)

Le bloc à outils permet d'ajouter des liens rapides, un champs de recherche, le choix de la langue du site, ou encore le profil de l'utilisateur. Le composant <dsmj-header> vous propose :

Le contenu du bloc à outils se place à l'intérieur du composant <dsmj-header>.

Contenu du bloc à outils personnalisé

Sous-composant `dsmj-header-tools` (optionnel)

Le sous-composant <dsmj-header-tools> propose de structurer le bloc, notamment pour :

Gestion des liens rapides `dsmj-btns-group` (optionnel)

Utilisez le composant <dsmj-btns-group> pour intégrer les liens rapides comme suit :

  • Lien rapide
  • Lien rapide
  • Lien rapide
  • Gestion du champ de recherche `dsmj-search` global (optionnel)

    Utilisez le composant `<dsmj-search>` pour intégrer le champ de recherche globale :

    La navigation principale horizontale `dsmj-nav` (optionnel)

    Le composant `<dsmj-search>` permet l'intégration d'une navigation principale horizontale. (consulter le README.md du composant pour connaître les options proposés) :

  • Accès direct
  • Accès direct
  • Accès direct
  • Exemple d'implémentation

  • Lien rapide 1
  • Lien rapide 2
  • Lien rapide 3
  • Accès direct
  • Accès direct
  • Accès direct