Dernière modification : 28 août 2025
Incluez des menus de navigation sur votre site Web pour aider les utilisateurs à trouver les informations dont ils ont besoin. Les menus de navigation sont souvent situés dans les en-têtes, les barres latérales et les pieds de page d’un site web. HubSpot fournit quelques solutions intégrées pour ajouter des menus à vos pages, en fonction de votre cas d’utilisation, mais vous pouvez également créer vos propres menus si nécessaire. Votre compte comprend également une page de paramètres pour la création et la gestion des menus, que les différentes méthodes de menu peuvent référencer.
  • Menus par défaut : HubSpot fournit deux types de menus par défaut qui peuvent être utilisés selon les besoins. Ces menus peuvent être ajoutés en tant que modules dans l’éditeur de page dans des zones de glisser-déposer ou dans des modèles, ou vous pouvez les ajouter à des modules personnalisés à l’aide de balises HubL.
    • Menu : couramment utilisé pour la navigation globale, comme dans l’en-tête ou le pied de page du site Web, le menu standard par défaut vous permet de sélectionner un menu que vous avez configuré dans vos paramètres de navigation, puis de le configurer davantage avec des options telles que les niveaux maximaux, les paramètres d’affichage et l’orientation.
    • Menu simple : couramment utilisé pour la navigation spécifique aux pages, telles que les pages piliers, le module de menu simple vous permet de créer des menus au niveau de la page. Plutôt que de faire référence à un menu que vous avez créé dans vos paramètres de navigation, les éléments de menu simples sont gérés dans l’éditeur de contenu et ont moins d’options de configuration que le menu standard. Cela permet aux créateurs de contenu de mettre à jour les menus sur des pages spécifiques au besoin sans affecter la navigation globale.
  • **Menus personnalisés : **lorsque les options de menu par défaut ne correspondent pas à vos besoins, vous pouvez créer vos propres solutions personnalisées. Cela peut aller de la création de modules personnalisés qui incluent des menus par défaut à l’aide du menu standard et des balises HubL simple_menu, à l’utilisation de la fonction menu() HubL pour créer une solution entièrement personnalisée à l’aide de groupes de répéteurs ou HubDB. Cela étant dit, lors de la création d’un menu personnalisé compliqué, vous devez garder à l’esprit l’expérience de l’éditeur. Dans de nombreux cas, il peut être plus logique d’utiliser le menu et les champs simple_menu en tandem avec la fonction menu() afin qu’il y ait un équilibre entre la solution personnalisée et l’expérience d’édition intuitive.
Ci-dessous, découvrez les différentes façons d’inclure des menus sur les pages et comment gérer les paramètres de navigation dans HubSpot.

​
Paramètres de navigation

Dans chaque compte, HubSpot inclut des paramètres de navigation afin que vous puissiez créer des menus multiniveaux à référencer dans les modules de menu et les balises. Cela crée une source unique de vérité pour un ensemble d’éléments de menu, vous n’aurez donc besoin de mettre à jour un menu qu’une seule fois pour mettre à jour toutes les pages référençant ce menu. Vous pouvez créer autant de menus que nécessaire, et chaque menu est livré avec des options de clonage, de suppression, de renommage et d’affichage de l’historique des révisions. Pour créer et gérer des menus dans HubSpot, accédez à Paramètres > Site Web > Menus de navigation. En savoir plus sur les paramètres de navigation dans la Base de connaissances de HubSpot.
Zone des paramètres de navigation
Lorsque vous travaillez avec des menus dans HubL, vous devrez peut-être référencer l’ID du menu. Cela ne s’applique pas aux menus simples, car leurs éléments de menu sont définis dans l’éditeur. Lors de la création d’un module personnalisé, le moyen le plus simple d’obtenir l’ID de menu est de créer un champ de menu. Ce champ permet au créateur de contenu de sélectionner un menu dans un menu déroulant et renvoie l’ID de menu. Si vous avez besoin de coder en dur l’ID du menu, vous pouvez le récupérer à partir de l’URL lorsque vous affichez le menu dans la page des paramètres de navigation.
menu-id-in-url
Notez que, lorsque vous arrivez pour la première fois sur la page, l’ID de menu par défaut ne s’affiche pas dans l’URL. Pour obtenir l’ID de ce menu par défaut, vous devrez sélectionner un autre menu, puis sélectionner à nouveau le menu par défaut.
Une bonne pratique pour les en-têtes de site, qui contiennent souvent la longue navigation principale, est de fournir un “lien « passer au contenu ». Cela permet aux utilisateurs qui naviguent au clavier d’éviter les menus trop longs.

​
Balises de menu HubL

Utilisez le menu et les balises HubL simple_menu pour ajouter des fonctionnalités de menu aux modules personnalisés. L’ajout de la balise à un module affichera le menu sur la page. Pour permettre aux créateurs de contenu de configurer les options du menu dans l’éditeur de page, vous devrez également inclure le menu ou le champ de menu simple dans le module. Ci-dessous, en savoir plus sur chaque type de balise de menu. La balise Menu HubL génère un menu HTML standard avec des noms de classe déjà fournis pour les niveaux de profondeur, les états actifs et si l’élément a des enfants. La balise menu peut être utilisée dans des modules personnalisés, ce qui permet de créer facilement des menus de navigation pour la navigation principale et la navigation dans les barres latérales. Cette balise attend que vous fournissiez l’ID du menu. 
{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}
La balise Menu simple fonctionne comme la balise Menu en générant un menu HTML standard avec des noms de classe pour les niveaux de profondeur, les états actifs et si l’élément a des enfants. La différence est que cette balise attend que vous fournissiez un dictionnaire de la structure du menu au lieu d’un ID de menu. C’est utile lorsque vous souhaitez que les champs d’un module déterminent la structure d’un menu au lieu d’utiliser les paramètres de navigation. Par exemple, vous pouvez utiliser ce type de module pour la table des matières d’une page pilier. 
{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}

​
Modules de menu par défaut

HubSpot fournit des modules par défaut que vous pouvez ajouter aux modèles codés, ainsi que des pages dans l’éditeur de pages lorsqu’un modèle comprend des zones de glisser-déposer. Chaque module aura une expérience d’édition différente, le menu standard ayant plus d’options de configuration que le menu simple. Comme les modules ne peuvent pas être imbriqués, vous ne pouvez pas les placer à l’intérieur d’autres modules. Vous devriez plutôt utiliser les balises Menu ou Menu simple. 
{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}

{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}

​
Balisage de menu standard

Les modules de menu par défaut sont alimentés par leurs balises de menu HubL respectives (menu et simple_menu) pour générer du HTML de menu standard. Comme les autres modules HubSpot, les modules de menu sont encadrés dans un balisage de module d’encadrement. Ces balises div et span rendent le module éditable avec l’éditeur de contenu. Le balisage de menu des modules de menu et de menu simple est le même, à l’exception de certaines des classes appliquées aux conteneurs d’encadrement et de menu. 
<div
  id="hs_cos_wrapper_widget_1711642118872"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-menu"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
>
  <span
    id="hs_cos_wrapper_widget_1711642118872_"
    class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu"
    style=""
    data-hs-cos-general-type="widget"
    data-hs-cos-type="menu"
  >
    <div
      id="hs_menu_wrapper_widget_1711642118872_"
      class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal"
      role="navigation"
      data-sitemap-name="default"
      data-menu-id="162449947934"
      aria-label="Navigation Menu"
    >
      <ul role="menu">
        <li
          class="hs-menu-item hs-menu-depth-1 hs-item-has-children"
          role="none"
        >
          <a
            href="https://developers.hubspot.fr/docsjavascript:;"
            aria-haspopup="true"
            aria-expanded="false"
            role="menuitem"
            >Menu item 1</a
          >
          <ul role="menu" class="hs-menu-children-wrapper">
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a
                href="https://developers.hubspot.fr/docs//freecrmtest.hubspotpagebuilder.com/test"
                role="menuitem"
                >A</a
              >
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.wikipedia.org/" role="menuitem">B</a>
            </li>
          </ul>
        </li>
        <li
          class="hs-menu-item hs-menu-depth-1 hs-item-has-children"
          role="none"
        >
          <a
            href="https://developers.hubspot.fr/docsjavascript:;"
            aria-haspopup="true"
            aria-expanded="false"
            role="menuitem"
            >Menu item 2</a
          >
          <ul role="menu" class="hs-menu-children-wrapper">
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a
                href="https://developers.hubspot.fr/docs//freecrmtest.hubspotpagebuilder.com/test"
                role="menuitem"
                >A</a
              >
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.hubspot.com/new-page" role="menuitem">B</a>
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.hubspot.com/blah" role="menuitem">C</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </span>
</div>
Comme indiqué ci-dessus, le menu réel s’affiche sous la forme d’un ul encadré par une div avec la classe hs-menu-wrapper. Cet encadrement aura des classes supplémentaires en fonction de la configuration du module dans l’éditeur de page, telles que l’activation des lanceurs. En savoir plus sur les classes ajoutées par ces paramètres ci-dessous. Dans l’ul, chaque élément de menu est une balise a encadrée dans un li. La balise li possède une classe qui indique la profondeur de l’élément dans l’arborescence des menus (par exemple : hs-menu-depth-1). Lorsqu’un élément de menu contient un élément enfant imbriqué, le li correspondant aura la classe supplémentaire hs-item-has-children. Le menu enfant s’affiche sous la forme d’un ul imbriqué avec la classe hs-menu-children-wrapper. Lorsque vous visitez une page incluse dans votre arborescence de menus, la classe active-branch est ajoutée aux éléments li parents et une classe active est ajoutée à l’élément li particulier de cette page.

​
Style de menu standard

Au niveau du module, qu’il s’agisse de modifier un module de menu dans l’éditeur de page ou de modifier un champ de menu dans un module personnalisé, vous aurez quelques options de configuration. Les champs Menu, Type de menu avancé et Niveaux max vous permettent de contrôler que les éléments de menu sont rendus comme li dans le balisage de la page. Mais les options d’orientation et de lanceurs auront un impact sur les sélecteurs CSS ajoutés au menu de l’encadrement div. Vous pouvez ensuite cibler ces sélecteurs dans votre CSS.
menu-options-in-editor
Ci-dessous, en savoir plus sur les classes qui sont ajoutées au menu de l’encadrement div en fonction de ces paramètres de champ.
ClasseDescription
hs-menu-flow-horizontalAjouté à l’encadrement div lorsque le menu est réglé sur l’orientation horizontale.
hs-menu-flow-verticalAjouté à l’encadrement div lorsque le menu est réglé sur l’orientation verticale.
flyoutsAjouté à l’encadrement div lorsque l’option Activer les lanceurs est sélectionnée.
no-flyoutsAjouté à l’encadrement div lorsque Activer les lanceurs n’est pas sélectionné.
Pour vous aider à commencer à styliser les menus, voici quelques exemples de sélecteurs CSS qui peuvent être utilisés pour styliser la balise de menu et le module de menu par défaut. 
/* Menus */
.hs-menu-wrapper ul {
  /* Targets all unordered lists within HubSpot menus */
}

/* Horizontal Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-horizontal ul {
  /* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
  /* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
  /* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
  /* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
  /* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
  /* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
  /* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper
  li
  a {
  /* Targets links within second-level unordered lists  */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children:hover
  > ul.hs-menu-children-wrapper {
  /* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
  > ul
  li.hs-item-has-children.active-branch {
  /* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal
  > ul
  li.hs-item-has-children.active-branch
  > ul.hs-menu-children-wrapper {
  /* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
  /* Targets the link within the active list item */
}

/* Vertical Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  /* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
  /* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
  /* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
  /* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
  /* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
  /* Targets top-level list items with children */
}

/* No flyouts
   ========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
  /* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets second-level child menus when flyouts are disabled */
}

​
Fonction HubL menu()

La fonction menu() existe pour vous permettre de créer des structures de menu entièrement personnalisées. Elle renvoie un objet que vous pouvez itérer pour générer un menu. De nombreuses propriétés sont fournies pour les éléments du menu. Sachez que lorsque vous utilisez la fonction Menu , vous êtes entièrement responsable de l’accessibilité de votre menu, de sa structure et de son style. 
{% set node = menu(987) %}
{% for child in node.children %}
	{{ child.label }}<br>
{% endfor %}

{% set default_node = menu("default") %}
{% for child in default_node.children %}
	{{ child.label }}<br>
{% endfor %}
Le Thème Boilerplate du CMS HubSpot contient un exemple de module de menu construit avec la fonction menu(). Vous pouvez le modifier en fonction de vos besoins pour créer des menus complexes.