Saltar al contenido principal

Introducción

🎯 ¿Qué hace este módulo?​

El módulo Menus te permite recuperar estructuras de navegación del sitio - menús de encabezado, menús de pie de página, navegación de barra lateral, menús móviles - construyendo dinámicamente navegación de múltiples niveles a partir de páginas configuradas en OneEntry.

Piénsalo como tu gestor de navegación - creas menús en el panel de administración de OneEntry (uniendo páginas), y este módulo obtiene la estructura completa del árbol de menús, para que puedas renderizar la navegación de manera dinámica sin codificar enlaces.

📖 Explicación Simple​

Cada sitio web necesita navegación para ayudar a los usuarios a encontrar contenido:

  • Menú de Encabezado - Navegación principal (Inicio, Acerca de, Servicios, Contacto)
  • Menú Móvil - Menú tipo hamburguesa con desplegables
  • Menú de Barra Lateral - Navegación por categorías (categorías de blog, filtros de productos)
  • Menú de Pie de Página - Enlaces legales, enlaces sociales, mapa del sitio
  • Mega Menú - Desplegables complejos con imágenes y categorías
  • Migajas de Pan - Ruta de la página actual (Inicio > Productos > Electrónica)

Problemas:

  • Difícil de actualizar - Necesidad de redeplegar código para cambiar el menú
  • Sin soporte multilingüe - Menús diferentes para cada idioma
  • No amigable para administradores - Se necesitan desarrolladores para cada cambio
  • Duplicación de menús - El mismo menú codificado en múltiples lugares

La solución de Menus:

Beneficios:

  • Actualizaciones fáciles - Cambia menús en el panel de administración, sin redepliegue
  • Multilingüe - Menús automáticamente localizados
  • Amigable para administradores - No desarrolladores pueden gestionar la navegación
  • Una única fuente de verdad - Una estructura de menú en todas partes

✨ Conceptos Clave​

¿Qué es un Menú?​

Un Menú es una estructura de navegación que contiene enlaces a páginas:

  • Elementos del Menú - Enlaces de navegación individuales (páginas)
  • Jerarquía - Estructura anidada (padre → hijos)
  • Ordenación - Orden de visualización de los elementos
  • Localización - Títulos traducidos por idioma
  • Dinámico - Obtener estructura de la API, renderizar en tu aplicación

Estructura del Menú​

Cada menú tiene esta estructura:

{
  id: 123,
  identifier: "header_menu",          // Identificador único
  localizeInfos: {
    title: "Navegación Principal"     // Título del menú
  },
  pages: [                            // Elementos del menú (páginas)
    {
      id: 1,                          // ID de la página
      pageUrl: "/home",               // URL de la página
      localizeInfos: {
        title: "Inicio",              // Mostrar en la página
        menuTitle: "Inicio"           // Mostrar en el menú
      },
      attributeValues: {},            // Valores de atributos
      parentId: 0,                    // Elemento de nivel superior
      position: 1                     // Orden de visualización
    }
  ]
}

Jerarquía del Menú​

Los menús soportan estructuras anidadas (navegación de múltiples niveles):

📂 Menú de Encabezado
├─ 🏠 Inicio (profundidad: 0, parentId: 0)
├─ 📖 Acerca de (profundidad: 0, parentId: 0)
│  ├─ 👥 Equipo (profundidad: 1, parentId: 2)
│  ├─ 🏢 Oficina (profundidad: 1, parentId: 2)
│  └─ 📜 Historia (profundidad: 1, parentId: 2)
├─ 🛍️ Productos (profundidad: 0, parentId: 0)
│  ├─ 💻 Electrónica (profundidad: 1, parentId: 4)
│  │  ├─ 📱 Teléfonos (profundidad: 2, parentId: 5)
│  │  └─ 💻 Portátiles (profundidad: 2, parentId: 5)
│  └─ 👕 Ropa (profundidad: 1, parentId: 4)
└─ 📞 Contacto (profundidad: 0, parentId: 0)

Tipos Comunes de Menú​

Tipo de MenúDescripciónCasos de Uso Ejemplo
Menú de EncabezadoNavegación principal del sitioBarra de navegación superior, enlaces primarios
Menú de Pie de PáginaEnlaces de pie de páginaLegal, social, mapa del sitio
Menú de Barra LateralNavegación por categoríasCategorías de blog, filtros de productos
Menú MóvilNavegación específica para móvilesMenú tipo hamburguesa, menú de cajón
Mega MenúDesplegable complejo con categoríasNavegación de múltiples niveles en comercio electrónico
Migajas de PanRuta de la página actualInicio > Productos > Electrónica

¿Por qué usar el módulo Menus?​

BeneficioDescripción
Navegación DinámicaObtener estructura del menú de la API, sin codificación
MultilingüeMenús automáticamente localizados según el idioma
Amigable para AdministradoresNo desarrolladores pueden actualizar la navegación
Estructura JerárquicaSoporte para menús anidados (profundidad ilimitada)
Amigable para SEORelaciones y estructura de página adecuadas
Una única fuente de verdadUna estructura de menú utilizada en todas partes

📋 Lo Que Necesitas Saber​

Los Menús se Crean en el Panel de Administración​

No puedes crear menús a través del SDK - se crean en el panel de administración de OneEntry:

Panel de Administración de OneEntry → Menús → Crear Menú → Agregar Páginas → Guardar

El SDK es para obtener estructuras de menú, no para crearlas.

Los Elementos del Menú son Páginas​

Importante: Los elementos del menú son páginas configuradas en OneEntry. No puedes agregar enlaces arbitrarios a los menús - cada elemento del menú debe ser una página.

Jerarquía del Menú (Relaciones Padre-Hijo)​

Los menús soportan profundidad de anidamiento ilimitada

💡 Notas Importantes​

Los Menús se Crean en el Panel de Administración​

Recuerda: El SDK es para obtener estructuras de menú, no para crear menús.

Para crear/editar menús: Usa el Panel de Administración de OneEntry o la API de Administración.

Los Elementos del Menú Deben Ser Páginas​

No puedes agregar enlaces arbitrarios a los menús. Cada elemento del menú debe ser una página configurada en OneEntry.

Solución para enlaces externos: Crea páginas con URLs externas en OneEntry, luego agrégalas a los menús.

La Jerarquía del Menú es Flexible​

Los menús soportan profundidad de anidamiento ilimitada - puedes tener tantos niveles como necesites.

Soporte Multilingüe​

Los menús soportan automáticamente multilingüe basado en langCode en defineOneEntry().

Mejor práctica: Obtener menús en el idioma preferido del usuario.

Cachear Menús para Rendimiento​

Los menús rara vez cambian - implementa caché para reducir llamadas a la API:

  • Frontend: localStorage, sessionStorage
  • Backend: Redis, caché en memoria
  • TTL: 1 hora recomendada

📊 Tabla de Referencia Rápida​

MétodoDescripciónCaso de Uso
getMenuByMarker()Obtener menú por marcadorObtener estructura de menú específica

❓ Preguntas Comunes (FAQ)​

¿Cómo creo un menú de múltiples niveles (navegación desplegable)?​

Los menús soportan profundidad de anidamiento ilimitada. Usa parentId para crear estructuras jerárquicas. En el panel de administración, puedes anidar páginas para crear relaciones padre-hijo que se reflejan automáticamente en la estructura del menú.

¿Puedo agregar enlaces externos a los menús?​

Los elementos del menú deben ser páginas configuradas en OneEntry. Para agregar enlaces externos, crea páginas con URLs externas en el módulo de Páginas, luego agrégalas a tu menú.

¿Cómo manejo el estado del elemento activo del menú?​

Compara la URL de la página actual con el pageUrl de cada elemento del menú. Aplica una clase/estilo activo cuando coincidan para resaltar la página actual en la navegación.

Mi menú tiene demasiados elementos. ¿Cómo optimizo el rendimiento?​

Cachea los menús usando localStorage o sessionStorage ya que rara vez cambian. Implementa carga diferida para mega menús con muchos elementos anidados. Considera usar un menú tipo hamburguesa optimizado para móviles para una mejor experiencia de usuario.

¿Cómo creo una navegación de migajas de pan?​

Usa la jerarquía del menú para construir migajas de pan. Traza desde la página actual hacia arriba a través de las relaciones parentId para construir la ruta de migajas de pan (Inicio > Categoría > Subcategoría > Página Actual).

¿Puedo tener diferentes menús para diferentes secciones?​

¡Sí! Crea múltiples menús con diferentes marcadores (por ejemplo, header_menu, footer_menu, sidebar_menu) y obténlos por separado usando getMenuByMarker().

🎓 Mejores Prácticas​

  • Usa marcadores, no IDs - Los marcadores son estables en todos los entornos
  • Cachea menús - Reduce llamadas a la API para datos que cambian raramente
  • Construye un árbol recursivo - Usa parentId para estructura jerárquica
  • Ordena por posición - Respeta el orden de visualización
  • Maneja el estado activo - Resalta la página actual
  • Proporciona menús de respaldo - Maneja errores de manera elegante
  • Soporta multilingüe - Usa langCode para localización
  • Optimiza para móviles - Implementa navegación responsiva

Más información sobre la interfaz de usuario del módulo https://doc.oneentry.cloud/docs/menu/introduction_menu

Definición del módulo Menus​

El módulo Menus define la estructura y navegación de tu sitio.

El menú es un elemento clave de la estructura y navegación de tu sitio. Con el menú, proporcionas a los visitantes una forma conveniente de navegar a través de diferentes secciones de tu aplicación y encontrar la información que necesitan.


const { Menus } = defineOneEntry(
  "tu-url-de-proyecto", {
    "token": "tu-token-de-aplicación"
  }
);

En la Plataforma OneEntry, puedes crear la estructura del menú directamente desde tu cuenta personal. Esto te permite cambiar el conjunto de páginas incluidas en el menú, su orden y títulos sin modificar el código fuente de tu aplicación.

Además, si es necesario, puedes crear niveles anidados en el menú, permitiendo una estructura en forma de árbol con secciones y subsecciones.

Todo esto te permite trabajar de manera conveniente y flexible con la navegación de tu aplicación directamente desde tu cuenta personal.

En el núcleo del menú están las páginas. La estructura del menú se crea a partir de páginas.

Puedes definir:

Qué páginas se incluirán en el menú En qué orden se presentarán al usuario Qué título se le dará al elemento del menú que lleva a una página específica La anidación de los elementos del menú (estructura de árbol) Algunos de estos conceptos se discutieron en la sección de páginas, y algunas configuraciones de página afectan la estructura del menú que puedes crear a partir de estas páginas.

🔗 Documentación Relacionada​