Última modificación: 28 de agosto de 2025
Incluye menús de navegación en tu sitio web para ayudar a los usuarios a encontrar la información que necesitan. Los menús de navegación suelen estar ubicados en los encabezados, barras laterales y pies de página de un sitio web. HubSpot ofrece algunas soluciones integradas para agregar menús a tus páginas, dependiendo de tu caso de uso, pero también puedes crear tus propios menús cuando sea necesario. Tu cuenta también incluye una página de configuración para crear y administrar menús, a la que pueden hacer referencia los distintos métodos de menú.
  • Menús predeterminados: HubSpot proporciona dos tipos de menús predeterminados que se pueden usar de forma inmediata según sea necesario. Estos menús se pueden agregar como módulos en el editor de páginas en áreas de arrastrar y soltar o en plantillas, o puedes agregarlos a módulos personalizados usando etiquetas HubL.
    • Menú: comúnmente utilizado para la navegación global, como en el encabezado o pie de página del sitio web, el menú estándar predeterminado te permite seleccionar un menú que hayas establecido en los ajustes de tu navegación, y luego configurarlo aún más con opciones como niveles máximos, configuración de pantalla y orientación.
    • Menú simple: comúnmente utilizado para la navegación específica de la página, como las páginas pilares, el módulo de menú simple te permite crear menús a nivel de página. En lugar de hacer referencia a un menú que has creado en la configuración de navegación, los elementos de menú simples se administran en el editor de contenido y tienen menos opciones de configuración que el menú estándar. Esto permite a los creadores de contenido actualizar menús en páginas específicas según sea necesario sin afectar la navegación global.
  • Menús personalizados: cuando las opciones de menú predeterminadas no se ajusten a tus necesidades, puedes crear tus propias soluciones personalizadas. Esto puede ir desde la creación de módulos personalizados que incluyen menús predeterminados utilizando las etiquetas menu y simple_menu de HubL estándar, hasta el uso de la función menu() de HubL para crear una solución completamente personalizada utilizando grupos de repetidores o HubDB. Dicho esto, al crear un menú personalizado complicado, debes tener en cuenta la experiencia del editor. En muchos casos, puede tener más sentido usar los campos menu y simple_menu junto con la función menu() para que haya un equilibrio entre la solución personalizada y la experiencia de edición intuitiva.
A continuación, encontrarás más información sobre las diferentes formas de incluir menús en las páginas y cómo gestionar la configuración de navegación en HubSpot.

​
Configuración de navegación

En cada cuenta, HubSpot incluye la configuración de navegación para que puedas crear menús de varios niveles a los cuales hacer referencia en los módulos y etiquetas del menú. Esto crea una única fuente de referencias para un conjunto de elementos del menú, por lo que solo tendrás que actualizar un menú una vez para actualizar todas las páginas que hacen referencia a ese menú. Puedes crear tantos menús como sea necesario, y cada menú viene con opciones para clonar, eliminar, cambiar el nombre y mostrar el historial de revisiones. Para crear y gestionar menús en HubSpot, ve a Configuración > Sitio web > Menús de navegación. Obtén más información sobre la configuración de navegación en la Base de conocimientos de HubSpot.
Área de configuración de la navegación
Cuando se trabaja con menús en HubL, es posible que necesites utilizar el ID del menú para referenciarlo. Esto no se aplica a los menús simples, ya que sus elementos de menú se establecen en el editor. Al crear un módulo personalizado, la forma más fácil de obtener el ID del menú es creando un campo de menú. Este campo permite al creador de contenido seleccionar un menú a partir de un menú desplegable y devuelve el ID del menú. Si necesitas codificar el ID del menú, puedes recuperarlo de la URL cuando veas el menú en la página de configuración de navegación.
menu-id-in-url
Ten en cuenta que, cuando llegues por primera vez a la página, el ID del menú predeterminado no se mostrará en la URL. Para obtener el ID de ese menú predeterminado, tendrás que seleccionar un menú diferente y luego volver a seleccionar el menú predeterminado.
Una de las mejores prácticas para los encabezados de los sitios, que a menudo contienen la larga navegación principal, es ofrecer un “enlace “saltar al contenido”. Esto ayuda a los usuarios que navegan con el teclado a saltarse los menús largos.

​
Etiquetas de menú HubL

Utiliza las etiquetas menu y simple_menu de HubL para agregar la funcionalidad del menú a los módulos personalizados. Al agregar la etiqueta a un módulo, se renderizará el menú de la página. Para permitir que los creadores de contenido configuren las opciones del menú en el editor de páginas, también tendrás que incluir el menú o el campo de menú simple en el módulo. A continuación, obtén más información sobre cada tipo de etiqueta de menú.

​
Menú estándar

La etiqueta HubL Menú genera un menú HTML estándar con nombres de clase ya proporcionados para los niveles de profundidad, los estados activos y si el elemento tiene hijos. La etiqueta de menú se puede utilizar dentro de los módulos personalizados, por lo que es una manera fácil de crear menús de navegación para la navegación principal y la barra lateral. Esta etiqueta espera que proporciones el ID del menú. 
{% 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' %}

​
Menú simple

La etiqueta menú simple funciona igual que la etiqueta HubL de menú generando un menú HTML estándar con nombres de clase para los niveles de profundidad, estados activos y si el elemento tiene hijos. La diferencia es que esta etiqueta espera que proporciones un dictado de la estructura del menú en lugar de un ID de menú. Esto es útil para cuando quieres que los campos de un módulo determinen la estructura de un menú en lugar de utilizar la configuración de navegación. Por ejemplo, es posible que quieras utilizar este tipo de módulo para la tabla de contenido de una página pilar. 
{% 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}] %}

​
Módulos de menú predeterminado

HubSpot proporciona módulos predeterminados que puedes agregar a las plantillas codificadas, así como páginas a través del editor de páginas cuando una plantilla incluye áreas de arrastrar y soltar. Cada módulo tendrá una experiencia de edición diferente, con el menú estándar con más opciones de configuración que el menú simple. Debido a que los módulos no pueden anidarse, no se pueden colocar dentro de otros módulos. En su lugar, debes utilizar las etiquetas de menú o menú 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}] %}

​
Marcado de menú estándar

Los módulos de menú predeterminados funcionan con sus respectivas etiquetas de menú de HubL (menu y simple_menu) para generar un menú HTML estándar. Al igual que otros módulos de HubSpot, los módulos de menú están envueltos en el marcado de la envoltura del módulo. Estas etiquetas div y span hacen que el módulo sea editable con el editor de contenidos. El marcado de menú de los módulos de menú y menú simple es el mismo, con la excepción de algunas de las clases aplicadas a la envoltura y a los contenedores de menú. 
<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.es/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.es/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.es/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.es/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>
Como se muestra arriba, el menú real se muestra como un ul envuelto en un div con la clase hs-menu-wrapper. Esta envoltura tendrá clases adicionales en función de cómo esté configurado el módulo en el editor de páginas, como habilitar los controles flotantes. Obtén más información sobre las clases agregadas mediante esta configuración a continuación. Dentro del ul, cada elemento del menú es una etiqueta a envuelta en un li. La etiqueta li tiene una clase que indica la profundidad del elemento en el árbol de menús (por ejemplo, hs-menu-depth-1). Cuando un elemento de menú contiene un elemento secundario anidado, el li correspondiente tendrá la clase adicional de hs-item-has-children. El menú secundario se representa como un ul anidado con la clase hs-menu-children-wrapper. Cuando visitas una página que está incluida en tu árbol de menús, la clase active-branch se agrega a los elementos li principales y una clase de active se agrega al elemento li particular de esa página.

​
Estilo de menú estándar

A nivel de módulo, ya sea editando un módulo de menú en el editor de páginas o editando un campo de menú en un módulo personalizado, tendrás algunas opciones de configuración. Los campos Menú, Tipo de menú avanzado y Niveles máximos te permiten controlar que los elementos del menú se representen como li en el marcado de página. Pero las opciones de orientación y de controles flotantes afectarán a los selectores CSS agregados a la envoltura de menú div. Luego, puedes orientar estos selectores en tu CSS.
menu-options-in-editor
A continuación, obtén más información sobre las clases que se agregan a la envoltura de menú div en función de estos ajustes de campo.
ClaseDescripción
hs-menu-flow-horizontalSe agrega al div de la envoltura cuando el menú está configurado en orientación horizontal.
hs-menu-flow-verticalSe agrega al div de la envoltura cuando el menú está configurado en orientación vertical.
flyoutsSe agrega al div de la envoltura cuando se selecciona Activar controles flotantes.
no-flyoutsSe agrega al div de la envoltura cuando no se selecciona Activar controles flotantes.
Para empezar a diseñar los menús, a continuación se muestran algunos ejemplos de selectores CSS que se pueden utilizar para diseñar la etiqueta de menú y el módulo de menú predeterminado. 
/* 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 */
}

​
Función menu() de HubL

La función menu() existe para permitirte crear estructuras de menú totalmente personalizadas. Devuelve un objeto por el que se puede iterar para generar un menú, hay muchas propiedades proporcionadas para los elementos del menú. Ten en cuenta que cuando utilizas la función de menú eres totalmente responsable de la accesibilidad de tu menú, la estructura y el estilo. 
{% 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 %}
La biblioteca de temas de CMS Hub contiene un módulo de menú de ejemplo construido con la función menu(). Puedes modificar eso para satisfacer tus necesidades para hacer menús complicados.