Header modern - En-tête "moderne"

L'en-tête (ou header) est le haut de page du site comprenant les éléments principaux de navigation.

Anatomie

Desktop

En-tête format desktop

En-tête format desktop

  1. Conteneur
  2. Premier logo
  3. Deuxième logo facultatif
  4. Nom du site / service facultatif
  5. Navigation Bar facultatif
  6. Premier lien externe facultatif
  7. Séparateur (s'affiche obligatoirement avec le premier lien externe)
  8. Deuxième lien externe facultatif
  9. Séparateur (s'affiche obligatoirement avec le deuxième lien externe)
  10. Troisième lien externe facultatif
  11. Séparateur (s'affiche obligatoirement avec le troisième lien externe)
  12. Quatrième lien externe facultatif
  13. Séparateur (s'affiche obligatoirement avec le quatrième lien externe)
  14. Cinquième lien externe facultatif
  15. Séparateur (affiché uniquement lors de l'utilisation de liens externes)
  16. Bouton de recherche facultatif
  17. Premier bouton facultatif
  18. Deuxième bouton facultatif
  19. Conteneur d'éléments d'action facultatif
  20. Bouton de connexion facultatif
  21. Bouton de menu facultatif

 

Mobile

En-tête format mobile

En-tête format mobile

  1. Conteneur
  2. Premier logo
  3. Icône de recherche facultatif
  4. Bouton facultatif
  5. Avatar (En mode mobile, le nom prénom n’est pas visible) facultatif
  6. Icône de menu facultatif
  7. Séparateur (affiché uniquement lors de l'utilisation d'un deuxième logo et/ou du nom du site ou de sa précision)
  8. Deuxième logo facultatif
  9. Nom du site / service facultatif

 


Variantes

En-tête simple

L'en-tête simple est utilisé pour les sites sans recherche, ni éléments de navigation.

Il est obligatoirement composé d'un logo :

  • Site grand public : logo Service public de l'autonomie
  • Site professionnel : logo CNSA, Caisse nationale de solidarité pour l'autonomie
En-tête simple

 

En-tête simple avec 2 logos

Header _ Variations 2

 

En-tête simple avec nom du service et précision

Header _ Variations 3

 

En-tête avec menu

L'en-tête avec menu est utilisé pour les sites possédant plusieurs pages ; le menu offre la possibilité de naviguer à travers elles.

Header _ Variations 4

 

En-tête avec accès rapides

L'en-tête avec accès rapides est utilisé sur les sites qui souhaitent mettre en avant des fonctionnalités clés, comme par exemple l'accès à la connexion / à son compte.

Utilisateur non connecté

Utilisateur non connecté

Lorsque l'utilisateur n'est pas connecté, un bouton de connexion est visible.

Utilisateur connecté

Utilisateur connecté

Le bouton profil est affiché lorsque l'utilisateur est connecté, remplaçant ainsi le bouton de connexion traditionnel. Il sert de point d'accès rapide au profil utilisateur et aux fonctionnalités associées, et affiche un avatar, nom & prénom.

 

En-tête avec recherche

L'en-tête avec recherche est utilisé pour les sites qui proposent de rechercher des éléments sur leurs plateformes.

Bouton de recherche

Bouton de recherche

L'utilisateur doit cliquer sur le bouton de recherche pour accéder à la fonctionnalité.

Recherche active

Recherche active

Lorsque l'utilisateur clique sur le bouton de recherche, le champ de saisie s'affiche.

 

En-tête avec liens externes

L'en-tête avec liens externes est utilisé pour les sites qui souhaitent mettre en avant des liens vers d'autres URL.

Header _ Variations 9

 


Responsive

L'en-tête est un composant réactif et s'étend automatiquement en largeur selon la taille de l'écran utilisé.

Affichage desktop

Affichage desktop

Des marges sont disposées des deux côtés de l'en-tête.

Affichage desktop avant de passer au breakpoint

Affichage desktop avant de passer au breakpoint "mobile"

En cas de page web plus étroite, les marges de l'en-tête diminuent jusqu'à 16px minimum de chaque côté.

Breakpoint mobile

Breakpoint mobile