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.

 

 

Structure

L’en-tête est composé :

  • du bloc Marque (dont les règles de composition sont disponibles ici  ) - obligatoire.

  • du nom de site - optionnel.

  • d’une ‘baseline’, sous le nom de site - optionnelle.

  • d’une partie fonctionnelle - proposant des accès rapide et/ou le moteur de recherche.- adaptée aux besoins particuliers de chaque site - optionnelle.

L’en-tête est sur fond blanc en thème clair et sur fond G800 en thème sombre.

En-tête simple

L’en-tête simple doit être utilisé pour les sites ne comprenant ni moteur de recherche, ni accès rapides.

Il est composé ici :

  • du bloc marque - obligatoire.

  • du nom de site - optionnel.

  • d’une phrase descriptive - optionnelle.

Un lien , dont la place peut changer selon les éléments présents dans l’en-tête, pointe vers la page d’accueil du site. Le lien est étendu à l’ensemble du bloc grâce à la classe .fr-enlarge-link.

En-tête simple avec bloc marque

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <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 - [À MODIFIER | nom de l’entité (ministère , secrétariat d‘état, gouvernement)]"> <p class="fr-logo"> République <br>Française </p> </a> </div> </div> </div> </div> </div> </div> </header>

Le lien est placé sur le bloc marque et peut-être étendu à l’ensemble du bloc .fr-header__brand
(via la classe.fr-enlarge-link.)

En-tête simple avec nom de service et description

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <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> <div class="fr-header__service"> <a href="/" title="Accueil - [À MODIFIER | Nom du site / service]"> <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>

Le lien est placé sur le “nom de service” et est étendu à l’ensemble du bloc .fr-header__brand
(via la classe.fr-enlarge-link.)

En-tête avec accès rapides

L’en-tête avec accès rapides doit être utilisé pour les sites souhaitant mettre en avant certaines pages/fonctionnalités clés de leur site, comme par exemple la connexion à un espace sécurisé.

Il est composé ici des éléments du haut de page simple et de liens accès rapides. Il est possible d’afficher jusqu'à 3 accès rapides maximum.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <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__navbar"> <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-833" aria-haspopup="menu" title="Menu" id="fr-btn-menu-mobile"> 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-fi-add-circle-line" href="#">Créer un espace</a> </li> <li> <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a> </li> <li> <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a> </li> </ul> </div> </div> </div> </div> </div> <!-- Navigation principale --> <div class="fr-header__menu fr-modal" id="modal-833" aria-labelledby="fr-btn-menu-mobile"> <div class="fr-container"> <button class="fr-link--close fr-link" aria-controls="modal-833">Fermer</button> <div class="fr-header__menu-links"></div> <nav class="fr-nav" id="navigation-832" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav> </div> </div> </header>

En-tête avec moteur de recherche

L’en-tête avec moteur de recherche doit être utilisé pour les sites souhaitant rendre facilement accessible le moteur de recherche.

Il est composé ici des éléments du haut de page simple et de la barre de recherche medium (cf. barre de recherche ).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <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__navbar"> <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-851" title="Rechercher"> Rechercher </button> <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-855" id="button-855" aria-haspopup="menu" title="Menu" id="fr-btn-menu-mobile-1"> Menu </button> </div> </div> <div class="fr-header__service"> <a href="/" title="Accueil - [À MODIFIER | Nom du site / service]"> <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-851"> <div class="fr-container fr-container-lg--fluid"> <button class="fr-link--close fr-link" aria-controls="modal-851">Fermer</button> <div class="fr-search-bar" id="search-850" role="search"> <label class="fr-label" for="search-850-input">Recherche </label> <input class="fr-input" placeholder="Rechercher" type="search" id="search-850-input" name="search-850-input"> <button class="fr-btn" title="Rechercher"> Rechercher </button> </div> </div> </div> </div> </div> </div> </div> <div class="fr-header__menu fr-modal" id="modal-855" aria-labelledby="fr-btn-menu-mobile-1"> <div class="fr-container"> <button class="fr-link--close fr-link" aria-controls="modal-840">Fermer</button> <div class="fr-header__menu-links"></div> <nav class="fr-nav" id="navigation-839" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav> </div> </div> </header>

Il peut également s’accompagner d’un logo opérateur.

Déclinaison avec logo opérateur

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 <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 src="../img/placeholder.9x16.png" class="fr-responsive-img" style="width:3.5rem;" 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-866" title="Rechercher"> Rechercher </button> <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-870" aria-haspopup="menu" title="Menu" id="fr-btn-menu-mobile-2"> Menu </button> </div> </div> <div class="fr-header__service"> <a href="/" title="Accueil - [À MODIFIER | Nom du site / service]"> <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-fi-add-circle-line" href="#">Créer un espace</a> </li> <li> <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a> </li> <li> <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a> </li> </ul> </div> <div class="fr-header__search fr-modal" id="modal-866"> <div class="fr-container fr-container-lg--fluid"> <button class="fr-link--close fr-link" aria-controls="modal-866">Fermer</button> <div class="fr-search-bar" id="search-865" role="search"> <label class="fr-label" for="search-865-input">Recherche </label> <input class="fr-input" placeholder="Rechercher" type="search" id="search-865-input" name="search-865-input"> <button class="fr-btn" title="Rechercher"> Rechercher </button> </div> </div> </div> </div> </div> </div> </div> <div class="fr-header__menu fr-modal" id="modal-870" aria-labelledby="fr-btn-menu-mobile-2"> <div class="fr-container"> <button class="fr-link--close fr-link" aria-controls="modal-870">Fermer</button> <div class="fr-header__menu-links"></div> <nav class="fr-nav" id="navigation-869" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav> </div> </div> </header>

En-tête avec accès rapides et moteur de recherche

Il s’agit de la version complète pour les sites souhaitant à la fois mettre en avant certaines pages/fonctionnalités clés de leur site et rendre facilement accessible le moteur de recherche.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 <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__navbar"> <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-866" title="Rechercher"> Rechercher </button> <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-870" aria-haspopup="menu" title="Menu" id="fr-btn-menu-mobile-3"> Menu </button> </div> </div> <div class="fr-header__service"> <a href="/" title="Accueil - [À MODIFIER | Nom du site / service]"> <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-fi-add-circle-line" href="#">Créer un espace</a> </li> <li> <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a> </li> <li> <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a> </li> </ul> </div> <div class="fr-header__search fr-modal" id="modal-866"> <div class="fr-container fr-container-lg--fluid"> <button class="fr-link--close fr-link" aria-controls="modal-866">Fermer</button> <div class="fr-search-bar" id="search-865" role="search"> <label class="fr-label" for="search-865-input">Recherche </label> <input class="fr-input" placeholder="Rechercher" type="search" id="search-865-input" name="search-865-input"> <button class="fr-btn" title="Rechercher"> Rechercher </button> </div> </div> </div> </div> </div> </div> </div> <div class="fr-header__menu fr-modal" id="modal-870" aria-labelledby="fr-btn-menu-mobile-3"> <div class="fr-container"> <button class="fr-link--close fr-link" aria-controls="modal-870">Fermer</button> <div class="fr-header__menu-links"></div> <nav class="fr-nav" id="navigation-869" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav> </div> </div> </header>

Il peux également être accompagné d’un logo opérateur

Déclinaison avec logo opérateur

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 <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 src="../img/placeholder.16x9.png" class="fr-responsive-img" style="max-width:9.0625rem;" 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-866" title="Rechercher"> Rechercher </button> <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-870" aria-haspopup="menu" title="Menu" id="fr-btn-menu-mobile-4"> Menu </button> </div> </div> <div class="fr-header__service"> <a href="/" title="Accueil - [À MODIFIER | Nom du site / service]"> <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-fi-add-circle-line" href="#">Créer un espace</a> </li> <li> <a class="fr-link fr-fi-lock-line" href="#">Se connecter</a> </li> <li> <a class="fr-link fr-fi-account-line" href="#">S’enregistrer</a> </li> </ul> </div> <div class="fr-header__search fr-modal" id="modal-866"> <div class="fr-container fr-container-lg--fluid"> <button class="fr-link--close fr-link" aria-controls="modal-866">Fermer</button> <div class="fr-search-bar" id="search-865" role="search"> <label class="fr-label" for="search-865-input">Recherche </label> <input class="fr-input" placeholder="Rechercher" type="search" id="search-865-input" name="search-865-input"> <button class="fr-btn" title="Rechercher"> Rechercher </button> </div> </div> </div> </div> </div> </div> </div> <div class="fr-header__menu fr-modal" id="modal-870" aria-labelledby="fr-btn-menu-mobile-4"> <div class="fr-container"> <button class="fr-link--close fr-link" aria-controls="modal-870">Fermer</button> <div class="fr-header__menu-links"></div> <nav class="fr-nav" id="navigation-869" role="navigation" aria-label="Menu principal"> <ul class="fr-nav__list"> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li> </ul> </nav> </div> </div> </header>

Responsive

En version mobile l’en-tête se compose d’une zone haute intégrant les éléments obligatoires liés au bloc marque. Une zone basse complète l’en-tête mobile avec :

  • le nom site (si présent)

  • le picto loupe pour accéder à la recherche (si présente)

  • le picto burger pour accéder au menu principal

Bloc marque mobile

Le bloc marque suit les mêmes règle de composition que pour le desktop et doit respecter la charte de marque de l'État .

Recherche

Le picto “loupe” permet l'affichage de la barre de recherche dans un ‘overlay’ dédié.

Le picto “loupe” ne doit être affiché que si la fonctionnalité de recherche est présente dans le header desktop.
Il doit être positionné dans le bloc .fr-header__navbar.

Le picto burger permet l’affichage du menu dans un overlay présentant :

Le picto “burger” ne doit être présent que si des accès rapides sont presents en version desktop et/ou la navigation principale est présente en version desktop.
Il doit être positionné dans le bloc .fr-header__navbar.

Règles d’utilisation

Usage

L’en-tête doit être utilisé sur l’ensemble des sites de la sphère gouvernementale. Sur chaque site, l’en-tête doit être affiché en haut de chaque page.

L’en-tête peut être utilisé seul sans système de navigation principale (one page, site outil…). La navigation principale est donc un composant dissocié de l’en-tête, elle est accessible ici .

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

1 <html data-fr-mourning>

 

Pour les designers
Le composant étant complexe, les symboles ne sont pas totalement dynamiques. Si vous devez utiliser les éléments “logo” ou le bloc “nom de site - baseline” il est nécessaire de détacher le symbole pour l’adapter, car ces éléments ne prennent pas automatiquement les espacements prévus de 5w entre eux.

 

Accessibilité

Les liens d'évitement (masqués ou non) sont placés juste avant le header.

Gestion du lien “retour à l’accueil”

  • Bloc-marque avec nom du site
    Le lien vers l’accueil du site est placé sur le nom du site (qu’il soit dans le bloc-marque, le nom du site et sa baseline ou le logo). Le lien est étendu à l’ensemble du bloc-marque en css par le bias de la la classe fr-enlarge-link .
    Le title du lien doit contenir le terme Accueil, suivi du nom du site .
    title="Accueil - [À MODIFIER | Nom du site / service]”
    Si le header est complexe et que le bloc marque n’est pas République Française, mais une autre entité, cette dernière doit également être ajoutée:
    title="Accueil - [À MODIFIER | Nom du site / service]”

Le menu est utilisable au clavier.

Contenu

Pour les libellés des lien accès rapides, utiliser des formulations claires et concises.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :