Menus et navigation

La plupart des sites web ont une forme de menu de navigation pour aider les utilisateurs à trouver des informations rapidement et facilement. 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. Comme ils sont si courants, HubSpot dispose de quelques outils intégrés pour faciliter la création et la gestion de ces menus, et, côté code, de multiples solutions pour l'affichage des menus afin que vous puissiez choisir la solution qui convient le mieux à votre site web.

Pour les menus globalement utilisés sur un site, comme le menu d'en-tête ou de pied de page d'un site, il existe une page de paramètres de navigation. À cet écran, créez, mettez à jour et supprimez des menus qui peuvent être utilisés par tous les modèles ou modules de votre compte. HubSpot fournit un module et une balise de menu pour faciliter l'affichage du menu sur votre site.

Pour les menus qui ne font sens que pour une seule page, comme la table des matières d'une page pilier, il existe des menus simples. Les menus simples ne sont pas globaux et sont spécifiques à la page sur laquelle ils sont affichés (sauf s'ils sont inclus dans le contenu global). Les menus simples sont modifiables au niveau de la page par les éditeurs de contenu et offrent une interface utilisateur similaire pour leur création/gestion. HubSpot fournit un module et une balise de menu simple pour faciliter l'affichage d'un menu simple sur votre site.

Les modules personnalisés peuvent avoir à la fois un menu simple et des champs de menu.  Comme les développeurs ont plus de contrôle sur le code de sortie, les modules personnalisés constituent généralement la méthode préférée de la plupart des développeurs. Vous pouvez ainsi créer des modules de barre latérale, des modules de navigation de pied de page, des modules de navigation d'en-tête, etc. pour vous adapter à votre workflow et à vos besoins professionnels ou conceptuels. Les champs de menu permettent à l'éditeur de contenu de choisir un menu parmi les menus de navigation du compte global. Le champ de menu simple leur permet de créer des menus qui ne sont pas réutilisables ailleurs.

Dans les cas d'utilisation de menus vraiment complexes, il peut être utile d'utiliser un module avec des groupes de répétiteurs ou un HubDB pour gérer la structure et la manière dont le menu prend forme. Cela dit, cette méthode se fait au détriment d'une interface utilisateur intuitive pour les éditeurs de contenu. Dans ce genre de situation, il peut être judicieux d'utiliser des champs de menu ou de menu simple en parallèle avec la fonction de menu, afin de pouvoir fournir une structure et une fonctionnalité avancées ET une bonne expérience du menu.

La plupart des menus de sites web ont un format similaire et le CMS HubSpot fournit une IU éditeur utile pour faciliter la création de menus dans ce format parent-enfant. Cette interface utilisateur (IU) vous permet d'imbriquer des liens vers des pages les uns sous les autres pour créer des menus multiniveaux. Les menus créés ici peuvent être affichés dans tout type de modèle ou de module. Pour configurer le menu de votre compte, allez à Paramètres > Pages Navigation.

Un compte HubSpot peut comporter plusieurs menus, que vous pouvez utiliser pour la navigation principale, les barres latérales, les méga-menus, la navigation de pied de page, etc. Les menus définis dans les paramètres de navigation sont réutilisables dans tout le site web.

Il existe plusieurs façons d'afficher les menus. Vous devez déterminer quelle option parmi les suivantes est la plus pertinente pour votre cas d'utilisation.

• Un menu personnalisé utilisant la fonction menu()
• La balise Menu HubL
• La balise Menu simple HubL
• Le module de menu par défaut

Tous ont leurs avantages et inconvénients. Assurez-vous de bien les comprendre avant de vous décider.

Petit rappel : 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.

Lorsque vous travaillez avec des menus dans HubL, vous devez utiliser l'ID du menu pour le référencer. Cela ne s'applique pas aux menus simples.

Si vous créez un module personnalisé, la meilleure façon d'obtenir l'identifiant du menu est de créer un champ de menu. Le champ de menu d'un module renvoie l'identifiant du menu, ce qui permet à l'éditeur de contenu de choisir le menu. Si, pour une raison quelconque, vous souhaitez ou devez coder en dur l'identifiant du menu, vous pouvez l'obtenir à partir de l'URL lorsque vous consultez la page Paramètres de navigation.

https://app.hubspot.com/menus/<portal id>/edit/<menu id>

Le menu par défaut n'affiche pas toujours l'identifiant. Changez de menu puis passez au menu par défaut, pour que l'identifiant apparaisse dans l'URL.

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.

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 comme des méga-menus.

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. Comme il s'agit d'une balise HubL et non d'un module, elle peut être utilisée dans des modules personnalisés.

Semblable à la balise Menu HubL, la balise Menu simple fonctionne comme la balise Menu HubL et génère 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 une bonne solution 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. Le champ de menu simple permet au créateur de contenu de construire le menu, et vous pouvez fournir la variable de ce champ dans cette balise. Un scénario où vous pourriez en avoir besoin serait pour un menu de type table des matières pour une longue page. Comme ce menu ne serait pas répété sur d'autres pages, ce n'est pas gênant s'il ne figure pas dans les paramètres de navigation. Comme il s'agit d'une balise HubL, et non d'un module, elle peut être utilisée dans des modules personnalisés.

Nous fournissons des modules par défaut qui peuvent être utilisés dans les modèles HTML+HubL et Glisser-Déposer. Le module de menu fourni par défaut utilise la balise de menu HubL. Le module Menu simple par défaut utilise la balise HubL simple_menu. Comme ils utilisent les balises de menu HubL, cela génère du HTML de menu standard. Comme il s'agit de véritables modules, vous pouvez les utiliser dans les balises dnd_area, les colonnes flexibles et les modèles de glisser-déposer. 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.