Pular para o conteúdo principal

Introdução

🎯 O que este módulo faz?​

O módulo Menus permite que você recupere estruturas de navegação do site - menus de cabeçalho, menus de rodapé, navegação na barra lateral, menus móveis - construindo dinamicamente uma navegação de múltiplos níveis a partir de páginas configuradas no OneEntry.

Pense nisso como seu gerenciador de navegação - você cria menus no painel de administração do OneEntry (ligando páginas entre si), e este módulo busca a estrutura completa da árvore de menus, para que você possa renderizar a navegação dinamicamente sem codificar links.

📖 Explicação Simples​

Todo site precisa de navegação para ajudar os usuários a encontrar conteúdo:

  • Menu de Cabeçalho - Navegação principal (Início, Sobre, Serviços, Contato)
  • Menu Móvel - Menu tipo hambúrguer com dropdowns
  • Menu Lateral - Navegação de categorias (categorias de blog, filtros de produtos)
  • Menu de Rodapé - Links legais, links sociais, mapa do site
  • Mega Menu - Dropdowns complexos com imagens e categorias
  • Breadcrumbs - Caminho da página atual (Início > Produtos > Eletrônicos)

Problemas:

  • Difícil de atualizar - Necessidade de reimplantar o código para alterar o menu
  • Sem suporte a múltiplos idiomas - Menus diferentes para cada idioma
  • Não amigável para administradores - Desenvolvedores necessários para cada alteração
  • Duplicação de menus - Mesmo menu codificado em vários lugares

A solução Menus:

Benefícios:

  • Atualizações fáceis - Altere menus no painel de administração, sem reimplantação
  • Multi-idioma - Menus automaticamente localizados
  • Amigável para administradores - Não desenvolvedores podem gerenciar a navegação
  • Fonte única de verdade - Uma estrutura de menu em todos os lugares

✨ Conceitos Chave​

O que é um Menu?​

Um Menu é uma estrutura de navegação que contém links para páginas:

  • Itens do Menu - Links de navegação individuais (páginas)
  • Hierarquia - Estrutura aninhada (pai → filhos)
  • Ordenação - Ordem de exibição dos itens
  • Localização - Títulos traduzidos por idioma
  • Dinâmico - Buscar estrutura da API, renderizar em seu aplicativo

Estrutura do Menu​

Cada menu tem esta estrutura:

{
  id: 123,
  identifier: "header_menu",          // Identificador único
  localizeInfos: {
    title: "Navegação Principal do Cabeçalho"   // Título do menu
  },
  pages: [                            // Itens do menu (páginas)
    {
      id: 1,                          // ID da página
      pageUrl: "/home",               // URL da página
      localizeInfos: {
        title: "Início",                // Exibir na página
        menuTitle: "Início"             // Exibir no menu
      },
      attributeValues: {},            // Valores de atributos
      parentId: 0,                    // Item de nível superior
      position: 1                     // Ordem de exibição
    }
  ]
}

Hierarquia do Menu​

Menus suportam estruturas aninhadas (navegação de múltiplos níveis):

📂 Menu de Cabeçalho
├─ 🏠 Início (profundidade: 0, parentId: 0)
├─ 📖 Sobre (profundidade: 0, parentId: 0)
│  ├─ 👥 Equipe (profundidade: 1, parentId: 2)
│  ├─ 🏢 Escritório (profundidade: 1, parentId: 2)
│  └─ 📜 História (profundidade: 1, parentId: 2)
├─ 🛍️ Produtos (profundidade: 0, parentId: 0)
│  ├─ 💻 Eletrônicos (profundidade: 1, parentId: 4)
│  │  ├─ 📱 Telefones (profundidade: 2, parentId: 5)
│  │  └─ 💻 Laptops (profundidade: 2, parentId: 5)
│  └─ 👕 Roupas (profundidade: 1, parentId: 4)
└─ 📞 Contato (profundidade: 0, parentId: 0)

Tipos Comuns de Menu​

Tipo de MenuDescriçãoExemplos de Casos de Uso
Menu de CabeçalhoNavegação principal do siteBarra de navegação superior, links primários
Menu de RodapéLinks de rodapéLegais, sociais, mapa do site
Menu LateralNavegação de categoriasCategorias de blog, filtros de produtos
Menu MóvelNavegação específica para móveisMenu tipo hambúrguer, menu de gaveta
Mega MenuDropdown complexo com categoriasNavegação de múltiplos níveis em e-commerce
BreadcrumbsCaminho da página atualInício > Produtos > Eletrônicos

Por que usar o Módulo Menus?​

BenefícioDescrição
Navegação DinâmicaBuscar estrutura do menu da API, sem codificação
Multi-idiomaMenus automaticamente localizados com base no local
Amigável para AdministradoresNão desenvolvedores podem atualizar a navegação
Estrutura HierárquicaSuporte para menus aninhados (profundidade ilimitada)
Amigável para SEORelações e estrutura de página adequadas
Fonte Única de VerdadeUma estrutura de menu usada em todos os lugares

📋 O que você precisa saber​

Você não pode criar menus via SDK - eles são criados no painel de administração do OneEntry:

Painel de Administração do OneEntry → Menus → Criar Menu → Adicionar Páginas → Salvar

O SDK é para buscar estruturas de menu, não para criá-las.

Itens do Menu são Páginas​

Importante: Itens do menu são páginas configuradas no OneEntry. Você não pode adicionar links arbitrários aos menus - cada item do menu deve ser uma página.

Hierarquia do Menu (Relações Pai-Filho)​

Menus suportam profundidade de aninhamento ilimitada

💡 Notas Importantes​

Lembre-se: O SDK é para buscar estruturas de menu, não para criar menus.

Para criar/editar menus: Use o Painel de Administração do OneEntry ou a API de Administração.

Itens do Menu Devem Ser Páginas​

Você não pode adicionar links arbitrários aos menus. Cada item do menu deve ser uma página configurada no OneEntry.

Solução alternativa para links externos: Crie páginas com URLs externas no OneEntry e, em seguida, adicione-as aos menus.

Hierarquia do Menu é Flexível​

Menus suportam profundidade de aninhamento ilimitada - você pode ter quantos níveis forem necessários.

Suporte a Múltiplos Idiomas​

Menus suportam automaticamente multi-idioma com base no langCode em defineOneEntry().

Melhor prática: Busque menus no idioma preferido do usuário.

Cache de Menus para Desempenho​

Menus raramente mudam - implemente cache para reduzir chamadas à API:

  • Frontend: localStorage, sessionStorage
  • Backend: Redis, cache de memória
  • TTL: 1 hora recomendada

📊 Tabela de Referência Rápida​

MétodoDescriçãoCaso de Uso
getMenuByMarker()Obter menu por marcadorBuscar estrutura de menu específica

❓ Perguntas Comuns (FAQ)​

Como faço para criar um menu de múltiplos níveis (navegação dropdown)?​

Menus suportam profundidade de aninhamento ilimitada. Use parentId para criar estruturas hierárquicas. No painel de administração, você pode aninhar páginas para criar relações pai-filho que se refletem automaticamente na estrutura do menu.

Os itens do menu devem ser páginas configuradas no OneEntry. Para adicionar links externos, crie páginas com URLs externas no módulo de Páginas e, em seguida, adicione-as ao seu menu.

Como faço para lidar com o estado do item de menu ativo?​

Compare a URL da página atual com o pageUrl de cada item do menu. Aplique uma classe/style ativa quando coincidirem para destacar a página atual na navegação.

Meu menu tem muitos itens. Como posso otimizar o desempenho?​

Cache os menus usando localStorage ou sessionStorage, pois eles raramente mudam. Implemente carregamento preguiçoso para mega menus com muitos itens aninhados. Considere usar um menu tipo hambúrguer otimizado para dispositivos móveis para melhor experiência do usuário.

Como faço para criar uma navegação de breadcrumbs?​

Use a hierarquia do menu para construir breadcrumbs. Rastreie a partir da página atual até as relações parentId para construir o caminho de breadcrumbs (Início > Categoria > Subcategoria > Página Atual).

Posso ter menus diferentes para diferentes seções?​

Sim! Crie vários menus com marcadores diferentes (por exemplo, header_menu, footer_menu, sidebar_menu) e busque-os separadamente usando getMenuByMarker().

🎓 Melhores Práticas​

  • Use marcadores, não IDs - Marcadores são estáveis entre ambientes
  • Cache os menus - Reduza chamadas à API para dados que raramente mudam
  • Construa uma árvore recursiva - Use parentId para estrutura hierárquica
  • Classifique por posição - Respeite a ordem de exibição
  • Lide com o estado ativo - Destaque a página atual
  • Forneça menus de fallback - Lide com erros de forma elegante
  • Suporte a múltiplos idiomas - Use langCode para localização
  • Otimize para dispositivos móveis - Implemente navegação responsiva

Mais informações sobre a interface do usuário do módulo https://doc.oneentry.cloud/docs/menu/introduction_menu

Definição do módulo Menus​

O módulo Menus define a estrutura e a navegação do seu site.

O menu é um elemento chave da estrutura e navegação do seu site. Com o menu, você oferece aos visitantes uma maneira conveniente de navegar por diferentes seções de sua aplicação e encontrar as informações que precisam.


const { Menus } = defineOneEntry(
  "sua-url-do-projeto", {
    "token": "seu-token-de-aplicativo"
  }
);

Na Plataforma OneEntry, você pode criar a estrutura do menu diretamente da sua conta pessoal. Isso permite que você altere o conjunto de páginas incluídas no menu, sua ordem e títulos sem modificar o código-fonte de sua aplicação.

Além disso, se necessário, você pode criar níveis aninhados no menu, permitindo uma estrutura em árvore com seções e subseções.

Tudo isso permite que você trabalhe de forma conveniente e flexível com a navegação de sua aplicação diretamente de sua conta pessoal.

No núcleo do menu estão as páginas. A estrutura do menu é criada a partir de páginas.

Você pode definir:

Quais páginas serão incluídas no menu Em que ordem elas serão apresentadas ao usuário Qual título será dado ao item do menu que leva a uma página específica O aninhamento dos itens do menu (estrutura em árvore) Alguns desses conceitos foram discutidos na seção de páginas, e algumas configurações de página afetam a estrutura do menu que você pode criar a partir dessas páginas.

🔗 Documentação Relacionada​