Última modificação: 28 de agosto de 2025
Inclua menus de navegação em seu site para ajudar os usuários a encontrarem as informações de que precisam. Os menus de navegação geralmente estão localizados nos cabeçalhos, barras laterais e rodapés de um site. A HubSpot fornece algumas soluções integradas para adicionar menus às suas páginas, dependendo do caso de uso, mas você também pode criar seus próprios menus quando necessário. A sua conta também inclui uma página de configurações para criar e gerenciar menus que pode ser consultada pelos vários métodos de menu.
  • Menus padrão: a HubSpot fornece dois tipos de menu padrão que podem ser usados conforme necessário. Esses menus podem ser adicionados como módulos no editor de páginas, nas áreas de arrastar e soltar, ou em modelos, ou você pode adicioná-los a módulos personalizados usando tags do HubL.
    • Menu: normalmente usado para navegação global, como no cabeçalho ou rodapé do site. O menu padrão permite selecionar um menu que você definiu nas configurações de navegação e, em seguida, configurá-lo ainda mais, com opções como níveis máximos, configurações de exibição e orientação.
    • Menu simples: normalmente usado para navegação específica da página, como páginas pilar. O módulo de menu simples permite criar menus no nível da página. Em vez de fazer referência a um menu criado nas configurações de navegação, os itens do menu simples são gerenciados no editor de conteúdo e têm menos opções de configuração do que o menu padrão. Isso permite que os criadores de conteúdo atualizem os menus em páginas específicas, conforme necessário, sem afetar a navegação global.
  • **Menus personalizados: **quando as opções de menu padrão não atendem às suas necessidades, você pode criar suas próprias soluções personalizadas. Isso pode variar desde a criação de módulos personalizados, que incluem menus padrão usando as tags de menu padrão e simple_menu do HubL, até o uso da função menu() do HubL para criar uma solução completamente personalizada usando grupos de repetidores ou HubDB. Dito isso, ao criar um menu personalizado complicado, você deve ter em mente a experiência do editor. Em muitos casos, pode fazer mais sentido usar os campos menu e simple_menu em conjunto com a função menu() para que haja um equilíbrio entre a solução personalizada e a experiência de edição intuitiva.
Saiba mais sobre as diferentes maneiras de incluir menus nas páginas e como gerenciar as configurações de navegação no HubSpot.

​
Configurações de navegação

Em cada conta, o HubSpot inclui configurações de navegação para que você possa criar menus de vários níveis para fazer referência em módulos e tags de menu. Isso cria uma única fonte confiável para um conjunto de itens de menu, por isso, você só precisará atualizar um menu uma vez para atualizar todas as páginas que fazem referência a esse menu. Você pode criar quantos menus forem necessários; e cada menu vem com opções para clonar, excluir, renomear e exibir o histórico de revisões. Para criar e gerir menus no HubSpot, acesse Configurações > Site > Menus de navegação. Saiba mais sobre as configurações de navegação na Central de Conhecimento da HubSpot.
Área de configurações de navegação
Ao trabalhar com menus no HubL, pode ser necessário fazer referência ao ID do menu. Isso não se aplica a menus simples, pois seus itens de menu são definidos no editor. Ao criar um módulo personalizado, a maneira mais fácil de obter o ID do menu é criando um campo de menu. Esse campo permite que o criador de conteúdo selecione um menu em um menu suspenso e retorne o ID do menu. Se precisar codificar o ID do menu, você pode recuperá-lo do URL ao visualizar o menu na página de configurações de navegação.
menu-id-in-url
Observe que, quando você acessar a página pela primeira vez, o ID do menu padrão não será exibido no URL. Para obter o ID desse menu padrão, você precisará selecionar um menu diferente e, em seguida, selecionar o menu padrão novamente.
Uma prática recomendada para cabeçalhos de sites que muitas vezes contêm uma longa navegação principal é fornecer um “link “pular para o conteúdo”. Isso ajuda os usuários que navegam usando o teclado a percorrer menus longos.

​
Tags de menu do HubL

Use as tags menu e simple_menu do HubL para adicionar a funcionalidade de menu aos módulos personalizados. Adicionar a tag a um módulo renderizará o menu na página. Para permitir que os criadores de conteúdo configurem as opções do menu no editor de páginas, você também precisará incluir o campomenu ou menu simples no módulo. Saiba mais sobre cada tipo de tag de menu. A tag de menu do HubL gera um menu HTML padrão com nomes de classe já fornecidos para níveis de profundidade, estados ativos e se o item inclui itens secundários. A tag de menu pode ser usada em módulos personalizados, tornando-a uma forma fácil de criar menus de navegação para a navegação principal e barra lateral. Essa tag espera que você forneça o ID do 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' %}
A tag de simple menu funciona exatamente como a tag de menu, gerando um HTML de menu padrão com nomes de classe para níveis de profundidade, estados ativos e se o item inclui itens secundários. A diferença é que esta tag espera que você forneça um dicionário da estrutura do menu em vez de um ID de menu. Isso é útil quando você quer que os campos de um módulo determinem a estrutura de um menu, em vez de usar as configurações de navegação. Por exemplo, você pode querer usar esse tipo de módulo para o índice de uma 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 menu padrão

O HubSpot fornece módulos padrão que você pode adicionar a modelos codificados e páginas, por meio do editor de páginas, quando um modelo incluir áreas de arrastar e soltar. Cada módulo terá uma experiência de edição diferente, com o menu padrão tendo mais opções de configuração do que o menu simples. Como os módulos não podem ser aninhados, você não pode colocá-los dentro de outros módulos. Em vez disso, você deve usar tags de menu ou simple menu. 
{% 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}] %}

​
Marcação de menu padrão

Os módulos de menu padrão são ativados por suas respectivas tags de menu do HubL (menu e simple_menu) para gerar HTML de menu padrão. Como outros módulos do HubSpot, os módulos de menu são agrupados na marcação do wrapper do módulo. Essas tags div e span tornam o módulo editável com o editor de conteúdo. A marcação de menu dos módulos de menu e menu simples é a mesma, com exceção de algumas das classes aplicadas ao wrapper e aos contêineres 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://br.developers.hubspot.com/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://br.developers.hubspot.com/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://br.developers.hubspot.com/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://br.developers.hubspot.com/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 mostrado acima, o menu real é renderizado como um ul agrupado em um div com a classe hs-menu-wrapper. Este wrapper terá classes adicionais de acordo com a configuração do módulo no editor de páginas (por exemplo, ativação de flyouts). Saiba mais sobre as classes adicionadas por essas configurações abaixo. Em ul, cada item de menu é uma tag a envolta em uma li. A tag li tem uma classe que indica a profundidade do item na árvore de menu (por exemplo, hs-menu-depth-1). Quando um item de menu contiver um item secundário aninhado, o lili correspondente terá a classe adicional de hs-item-has-children. O menu secundário é processado como um ul aninhado com a classe hs-menu-children-wrapper. Quando você visita uma página incluída na sua árvore de menu, a active-branch é adicionada aos itens li principais e uma classe de active é adicionada ao item li específico dessa página.

​
Estilo de menu padrão

No nível do módulo, na edição de um módulo de menu no editor de páginas ou de um campo de menu em um módulo personalizado, você terá algumas opções de configuração. Os campos Menu, Tipo de menu avançado e Níveis máximos permitem controlar se os itens do menu são renderizados como li na marcação da página. No entanto, as opções de orientação e flyouts afetarão os seletores de CSS adicionados ao div do wrapper do menu. Em seguida, você pode segmentar esses seletores no seu CSS.
menu-options-in-editor
Saiba mais sobre as classes que são adicionadas ao div do wrapper do menu, dependendo dessas configurações de campo.
ClasseDescrição
hs-menu-flow-horizontalAdicionado ao div do wrapper quando o menu estiver definido para a orientação horizontal.
hs-menu-flow-verticalAdicionado ao div do wrapper quando o menu estiver definido para a orientação vertical.
flyoutsAdicionado ao div do wrapper quando a opção Ativar flyouts estiver selecionada.
no-flyoutsAdicionado ao div do wrapper quando a opção Ativar flyouts não estiver selecionada.
Para começar a estilizar os menus, veja alguns exemplos de seletores de CSS que podem ser usados para estilizar a tag de menu e o módulo de menu padrão. 
/* 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 */
}

​
Função menu() do HubL

A função menu() existe para permitir que você crie estruturas de menu totalmente personalizadas. Ela retorna um objeto que você pode iterar para gerar um menu. Muitas propriedades são fornecidas para os itens de menu. Ao utilizar a função de menu, você é totalmente responsável pela acessibilidade do seu menu, pela estrutura e pelo 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 %}
O Boilerplate de temas do HubSpot CMS contém um exemplo de módulo de menu criado com a função menu(). Você pode modificar isso para atender às suas necessidades e criar menus complexos.