Navigation et menus

Configurer le header et le footer globaux : sources de menu, méga-menu, recherche, barre supérieure, colonnes du footer, header et footer des landing pages.

Mis à jour le 23 août 2026 · 5 min de lecture · S'applique à partir de la version 1.0.0

Le header et le footer sont du contenu global : modifiez-les depuis n'importe quel éditeur de page (HubSpot vous avertit que la modification s'applique à toutes les pages) ou depuis Outils de conception → Mistral Pro → templates → partials. Construisez d'abord vos menus dans Paramètres → Contenu → Navigation (l'éditeur de menus de HubSpot), puis indiquez-les au theme.

Le header du site avec un panneau de méga-menu ouvert, tuiles à icônes et carte à la une

Le header : Site header with mega menu and search

Logo

Le logo hérite de votre kit de marque ; un logo pour fonds sombres optionnel est utilisé tant que le header est transparent au-dessus d'un hero sombre. Sans logo, le texte du wordmark s'affiche, avec une marque optionnelle.

Dans le groupe Navigation, Menu source propose trois options :

Option	Quand l'utiliser
HubSpot navigation menu	Un menu construit dans Paramètres → Contenu → Navigation. Recommandé pour un vrai site : un seul endroit à maintenir, et HubSpot gère l'état actif. Choisissez le menu dans HubSpot menu (la valeur par défaut « Select a menu » désigne le menu par défaut du compte).
Simple menu edited here	La valeur par défaut : un petit menu enregistré avec le header, modifié sur place. Utile pour démarrer vite.
Menu items with icons and descriptions	Des entrées de menu saisies dans le module, chaque sous-entrée avec un libellé, un lien, une courte description et une icône — pour les tuiles de méga-menu les plus riches.

Deux niveaux de navigation sont affichés — les entrées de premier niveau et leurs enfants directs ; un troisième niveau est ignoré.

Default sub-menu style s'applique à toute entrée ayant des enfants : liste déroulante ou méga-menu à tuiles d'icônes. Pour donner un panneau plus riche à une entrée précise, ajoutez un élément dans Mega-menu panels et saisissez le libellé de l'entrée dans Applies to the menu item labeled : le panneau est associé par libellé. Quatre styles de panneau :

Dropdown list (liste déroulante)
Icon tiles — chaque sous-entrée en tuile avec une icône et une description. Avec un menu HubSpot ou un menu simple, les icônes et descriptions viennent des Tile details du panneau, associés par libellé de sous-entrée.
Icon tiles and a featured card — tuiles plus une carte avec image, badge, légende, titre et bouton.
Icon tiles and the latest articles — tuiles plus les derniers articles d'un blog (choisissez le blog et le nombre d'articles).

Chaque panneau peut avoir une rangée de pied avec un texte et deux boutons. Les icônes et descriptions n'apparaissent que dans le méga-menu sur ordinateur ; sur téléphone, le menu devient une superposition plein écran avec navigation en profondeur dans les sous-menus.

Appel à l'action, recherche, sélecteur de langue

Call to action — un bouton (libellé, lien, flèche optionnelle), suivant le style de bouton principal du theme.
Site search — une boîte de dialogue de recherche avec un placeholder, des liens rapides, une aide et un libellé de raccourci de fermeture. Elle envoie vers /hs-search-results ; modifiez Search results page path si votre page de résultats est ailleurs (et faites de même dans le module propre de la page de résultats).
Language switcher — affiché dans la barre supérieure et dans le menu mobile quand la page a des traductions. Voir Site multilingue.

Barre supérieure

Activée dans les réglages du theme (Header → Top bar) et remplie ici : coordonnées (icône, texte, lien optionnel, affichée ou non dans le menu mobile) et liens secondaires (libellé, lien, couleur d'accent, icône). La barre supérieure reste dans le flux et disparaît au défilement ; la barre du header, elle, est fixe et reste visible (Sticky header dans les réglages du theme).

Libellés d'accessibilité

Lien d'évitement, lien du logo, navigation principale, bascule de sous-menu, boutons de recherche et de menu, dialogue mobile, libellé retour… tous modifiables, donc traduisibles.

Colonne de marque — logo (hérite du kit de marque) ou wordmark, description, coordonnées (icône, texte, lien), liens sociaux (YouTube, Instagram, Facebook, LinkedIn, X, Behance, e-mail).
Colonnes de menu — jusqu'à quatre, chacune avec un titre (h2, h3 ou paragraphe) et une Links source : HubSpot navigation menu ou simple menu edited here. Les colonnes se replient en accordéons sur téléphone.
Rangée légale — texte de copyright, l'année en cours ajoutée automatiquement (mise à jour dans le navigateur), un suffixe, des liens légaux (menu HubSpot ou menu simple), un bouton de paramètres des cookies qui rouvre la bannière de cookies de HubSpot, et un sélecteur de langue optionnel.
Style — couleurs du texte, des titres, des liens au survol, du fond et des séparateurs héritées des réglages Footer du theme. Le wordmark géant est un réglage du theme (Footer → Oversized wordmark).

Landing pages : un header et un footer allégés

Le template Landing page full width remplace le header et le footer globaux par deux modules qui ne portent volontairement aucun menu de navigation, pour que rien ne détourne le visiteur de l'offre :

Landing page header with logo and call to action — logo (hérite du kit de marque), un numéro de téléphone optionnel et un bouton d'appel à l'action. Fond page, discret ou sombre ; hauteur compacte ou normale ; logo à gauche et actions à droite, ou centré.
Landing page footer with legal links — logo, une courte rangée de liens légaux, la ligne de copyright et des liens sociaux optionnels.

Ils se modifient sur la landing page elle-même, pas globalement.

Voir aussi

Réglages du theme — les groupes Header et Footer
Pages système — la page de résultats de recherche
Site multilingue