Menús y navegación

Casi todos los sitios web tienen algún tipo de menú de navegación para ayudar a los usuarios a encontrar la información rápida y fácilmente. Los menús de navegación suelen estar ubicados en los encabezados, barras laterales y pies de página de un sitio web. Debido a que son tan comunes, HubSpot tiene algunas herramientas integradas para facilitar la creación y administración de estos menús, y en el lado del código múltiples soluciones para mostrar los menús para que puedas elegir la solución que tenga más sentido para tu sitio web.

Para los menús que se utilizan globalmente en todo el sitio, como el menú del encabezado o del pie de página de un sitio, hay una página de configuración de la navegación. En esta pantalla se crean, actualizan y eliminan los menús, que pueden ser utilizados por cualquier plantilla o módulo de tu cuenta. HubSpot proporciona un módulo de menú y una etiqueta para facilitar la visualización del menú en tu sitio.

Para los menús que sólo tienen sentido para una sola página, como el índice de una página pilar, hay menús simples. Los menús simples no son globales y son específicos de la página en la que se muestran (a menos que se incluyan en el contenido global). Los menús simples son editables a nivel de página por los editores de contenido y ofrecen una interfaz de usuario similar para crearlos y administrarlos. HubSpot proporciona un módulo de menú simple y una etiqueta para hacer que la visualización de un menú simple en tu sitio sea fácil.

Los módulos personalizados pueden tener tanto un menú simple como campos de menú.  Debido a que los desarrolladores tienen más control sobre el código de salida, los módulos personalizados suelen ser el método preferido por la mayoría de los desarrolladores. Te permite crear módulos de barra lateral, módulos de navegación de pie de página, módulos de navegación de encabezado, etc. para adaptarse a tu workflow y a tus necesidades de negocio o de diseño. Los campos de menú permiten al editor de contenidos elegir un menú de los menús de navegación global de la cuenta. El campo del menú simple permite crear menús que no son reutilizables en otros lugares.

Para casos de uso de menús realmente complicados puede tener sentido utilizar un módulo con grupos de repetición o un HubDB para gestionar la estructura y la forma del menú. Sin embargo, este método tiene como contrapartida una interfaz de usuario simple para los editores de contenidos. Para situaciones como esta puede tener sentido utilizar campos de menú o de menú simple en conjunto con la función de menú, para que puedas proporcionar una estructura avanzada, funcionalidad, Y una buena experiencia de menú.

La mayoría de los menús de los sitios web siguen un formato similar y el CMS de HubSpot proporciona una útil interfaz de usuario del editor para facilitar la creación de menús en ese formato padre-hijo. Esta interfaz de usuario (UI) permite anidar los enlaces a las páginas que se encuentran debajo de otras para crear menús de varios niveles. Los menús creados aquí pueden mostrarse en cualquier tipo de plantilla o módulo. Para configurar el encabezado del menú de la cuenta, dirígete a Configuración > Páginas > Navegación.

Una cuenta de HubSpot puede tener múltiples menús, puedes usarlos para tu navegación principal, barras laterales, mega-menús, navegaciones de pie de página, etc. Los menús definidos en las configuraciones de navegación son reutilizables en todo el sitio web.

Existen múltiples formas de mostrar los menús. Debes determinar cuál de las siguientes opciones tiene más sentido para tu caso de uso.

• Un menú personalizado utilizando la función menu()
• La etiqueta HubL Menú
• La etiqueta HubL Simple Menú
• El módulo de menú predeterminado

Cada uno tiene sus ventajas y desventajas, asegúrate de entenderlas antes de decidir

Como recordatorio amistoso: 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.

Cuando se trabaja con menús en HubL es necesario utilizar el ID del menú para referenciarlo. Esto no se aplica a los menús simples

Si estás construyendo un módulo personalizado la mejor manera de obtener el id del menú, es en realidad crear un campo de menú. El campo de menú en un módulo devuelve el id del menú dando al editor de contenido una forma de elegir el menú. Si por alguna razón quieres o necesitas codificar el id del menú, puedes obtener el id del menú de la URL cuando veas la página de configuración de navegación

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

El menú predeterminado no siempre muestra el id directamente, cambia los menús y luego cambia al predeterminado, para hacer que el id se muestre en la URL.

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.

La plantilla de tema de CMS de HubSpot 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 como los mega-menús.

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ú. Como se trata de una etiqueta HubL y no de un módulo, puede utilizarse dentro de módulos personalizados.

Similar a la etiqueta HubL Menú, la etiqueta simple de menú 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 bueno 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. El campo de menú simple, permite al creador de contenido construir el menú, y puede proporcionar la variable de ese campo en esta etiqueta. Un escenario en el que puedes querer esto es para un menú de tipo tabla de contenido para una página larga. Ese menú no se repetiría en otras páginas, así que está bien que no esté en las configuraciones de navegación. Debido a que se trata de una etiqueta HubL, y no de un módulo, puede utilizarse dentro de módulos personalizados.

Proporcionamos módulos predeterminados que pueden ser utilizados tanto en plantillas HTML+HubL como en plantillas arrastrar y soltar. El módulo de menú predeterminado utiliza la etiqueta de menú HubL. El módulo de menú simple predeterminado utiliza la etiqueta HubL simple_menu. Dado que utilizan las etiquetas de menú HubL, genera un menú HTML estándar. Como se trata de módulos reales, puedes utilizarlos dentro de las etiquetas dnd_area, las columnas flexibles y las plantillas de arrastrar y soltar. 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 menú o menú simple.