Menus e navegação

Last updated:

Quase todos os sites têm alguma forma de menu de navegação para ajudar os usuários a encontrar informações de forma rápida e fácil. Os menus de navegação geralmente estão localizados nos cabeçalhos, barras laterais e rodapés de um site. Por serem tão comuns, o HubSpot tem algumas ferramentas incorporadas para facilitar a criação e a gestão destes menus, e no lado do código, várias soluções para exibir menus, para que você possa escolher a solução que faz mais sentido para o seu site.

Para menus que são usados globalmente em um site, como o menu de cabeçalho ou rodapé de um site, há uma página de configurações de navegação. Nesta tela, você cria, atualiza e exclui menus, que podem ser usados por quaisquer modelos ou módulos da sua conta. O HubSpot fornece tags e um módulo de menu para facilitar a exibição do menu no seu site.

Para menus que só fazem sentido em uma única página, como um índice em uma página pilar, existem os menus simples. Menus simples não são globais e são específicos para a página em que são exibidos (a menos que sejam incluídos no conteúdo global). Menus simples podem ser editados em nível de página nos editores de conteúdo e fornecem uma IU similar para criação/gerenciamento. O HubSpot fornece tags e um módulo de menu simples para facilitar a exibição do menu simples no seu site.

Os módulos personalizados podem ter tanto campos de menu simples quanto campos de menu.  Os módulos personalizados geralmente são o método preferido pela maioria dos desenvolvedores, pois assim eles têm mais controle sobre o código de saída. Isso permite criar módulos de barra lateral, módulos de navegação de rodapé, módulos de navegação de cabeçalho etc., de modo a adequar ao seu fluxo de trabalho e às suas necessidades de negócios ou de design. Os campos de menu permitem ao editor de conteúdo escolher um menu a partir dos menus de navegação globais da conta. O campo de menu simples permite criar menus que não podem ser reutilizados em outros lugares.

Para casos de uso extremamente complexos, pode fazer sentido utilizar um módulo com grupos repetidores ou um HubDB para gerenciar a estrutura e a forma como o menu é construído. Porém, esse método torna a IU mais complicada para os editores de conteúdo. Para situações como essa, pode fazer sentido usar campos de menu ou campos de menu simples em conjunto com a função menu, para que você possa fornecer estrutura avançada, funcionalidade E uma boa experiência de menu.

Opções de menu personalizadas

Configurações de navegação

A maioria dos menus do site segue um formato semelhante e o HubSpot CMS fornece uma interface de edição útil para facilitar a criação de menus nesse formato principal/secundário. Esta interface do usuário (IU) permite aninhar links para páginas umas abaixo das outras para criar menus multiníveis. Os menus criados aqui podem ser exibidos em qualquer tipo de modelo ou módulo. Para configurar um menu que será usado em toda a conta, acesse Configurações > Páginas > Navegação.

Área de configurações de navegação

Uma conta da HubSpot pode ter vários menus. Você pode usá-los para sua navegação principal, barras laterais, mega-menus, navegação em rodapé etc. Os menus definidos nas configurações de navegação são reutilizáveis em um site.

Exibir menus

Existem várias formas de exibir menus. Você deve determinar qual das opções a seguir faz mais sentido para o seu caso de uso.

Cada um tem vantagens e desvantagens; certifique-se de compreendê-las antes de decidir.

Apenas para lembrá-lo: 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.

Obtenha o ID do menu

Ao trabalhar com menus no HubL, você precisa usar o ID do menu para referenciá-lo. Isso não se aplica a menus simples.

Se você está criando um módulo personalizado, a melhor maneira de obter o ID do menu é, na verdade, criar um campo de menu. O campo de menu em um módulo retorna o ID do menu, o que permite ao editor de conteúdo escolher o menu. Se por algum motivo você quiser ou precisar codificar o ID do menu, poderá obter o ID do menu da URL ao visualizar a página de configurações de navegação.

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

O menu padrão nem sempre exibe explicitamente o IS. Altere os menus e depois altere para o padrão, para fazer com que o ID seja exibido na URL.

Um menu personalizado usando a função menu()

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.

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 esse exemplo para atender às suas necessidades e criar menus complexos, como mega menus.

A tag de menu do HubL

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. Esta tag espera que você forneça o ID do menu. Como esta é uma tag do HubL e não um módulo, ela pode ser usada em módulos personalizados.

{% 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 menu simples do HubL

Similar à tag de menu do HubL, a tag de menu simples funciona como a tag de menu do HubL ao gerar o menu HTML 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. O campo de menu simples permite ao criador do conteúdo criar o menu, e você pode fornecer a variável desse campo para esta tag. Um cenário de uso disso é quando você quer um tipo de menu de índice para uma página longa. Esse menu não seria repetido em outras páginas; por isso, não há problema de não estar incluído nas configurações de navegação. Como esta é uma tag do HubL, e não um módulo, ela pode ser usada em módulos personalizados.

{% 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}] %}

O módulo de menu padrão

Nós fornecemos módulos padrão que podem ser usados tanto em HTML+HubL quanto em modelos de arrastar e soltar. O módulo de menu padrão usa a tag menu do HubL. O módulo de menu simples padrão usa a tag simple_menu do HubL. Como usa as tags de menu do HubL, ele gera o menu HTML padrão. Como estes são módulos reais, você pode usá-los dentro das tags dnd_area, em colunas flexíveis e em modelos de arrastar e soltar. Como os módulos não podem ser aninhados, você não pode colocar esses módulos dentro de outros módulos. Em vez disso, você deve usar tags de menu ou menu simples.

{% 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}] %}

Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..