Introduction

🎯 Que fait ce module ?

Le module Menus vous permet de récupérer les structures de navigation du site - menus de header, menus de footer, navigation de barre latérale, menus mobiles - en construisant dynamiquement une navigation multi-niveaux à partir des pages configurées dans OneEntry.

Considérez-le comme votre gestionnaire de navigation - vous créez des menus dans le panneau d'administration de OneEntry (en liant les pages entre elles), et ce module récupère la structure complète de l'arbre de menu, vous permettant de rendre la navigation dynamiquement sans coder les liens en dur.

📖 Explication Simple

Chaque site web a besoin d'une navigation pour aider les utilisateurs à trouver du contenu :

Menu de Header - Navigation principale (Accueil, À propos, Services, Contact)
Menu Mobile - Menu hamburger avec des sous-menus
Menu de Barre Latérale - Navigation par catégorie (catégories de blog, filtres de produits)
Menu de Footer - Liens légaux, liens sociaux, plan du site
Mega Menu - Sous-menus complexes avec images et catégories
Fil d'Ariane - Chemin de la page actuelle (Accueil > Produits > Électronique)

Problèmes :

Difficile à mettre à jour - Nécessité de redéployer le code pour changer le menu
Pas de support multilingue - Menus différents pour chaque langue
Pas convivial pour les administrateurs - Développeurs nécessaires pour chaque changement
Duplication de menu - Même menu codé en dur à plusieurs endroits

La solution Menus :

Avantages :

Mises à jour faciles - Changer les menus dans le panneau d'administration, pas de redéploiement
Multilingue - Menus automatiquement localisés
Convivial pour les administrateurs - Les non-développeurs peuvent gérer la navigation
Source unique de vérité - Une structure de menu partout

✨ Concepts Clés

Un Menu est une structure de navigation qui contient des liens vers des pages :

Éléments de Menu - Liens de navigation individuels (pages)
Hiérarchie - Structure imbriquée (parent → enfants)
Ordre - Ordre d'affichage des éléments
Localisation - Titres traduits par langue
Dynamique - Récupérer la structure depuis l'API, rendre dans votre application

Chaque menu a cette structure :

{
  id: 123,
  identifier: "header_menu",          // Identifiant unique
  localizeInfos: {
    title: "Navigation Principale"    // Titre du menu
  },
  pages: [                            // Éléments du menu (pages)
    {
      id: 1,                          // ID de la page
      pageUrl: "/home",               // URL de la page
      localizeInfos: {
        title: "Accueil",              // Affichage sur la page
        menuTitle: "Accueil"           // Affichage dans le menu
      },
      attributeValues: {},            // Valeurs d'attribut
      parentId: 0,                    // Élément de niveau supérieur
      position: 1                     // Ordre d'affichage
    }
  ]
}

Les menus supportent des structures imbriquées (navigation multi-niveaux) :

📂 Menu de Header
├─ 🏠 Accueil (profondeur : 0, parentId : 0)
├─ 📖 À propos (profondeur : 0, parentId : 0)
│  ├─ 👥 Équipe (profondeur : 1, parentId : 2)
│  ├─ 🏢 Bureau (profondeur : 1, parentId : 2)
│  └─ 📜 Histoire (profondeur : 1, parentId : 2)
├─ 🛍️ Produits (profondeur : 0, parentId : 0)
│  ├─ 💻 Électronique (profondeur : 1, parentId : 4)
│  │  ├─ 📱 Téléphones (profondeur : 2, parentId : 5)
│  │  └─ 💻 Ordinateurs portables (profondeur : 2, parentId : 5)
│  └─ 👕 Vêtements (profondeur : 1, parentId : 4)
└─ 📞 Contact (profondeur : 0, parentId : 0)

Types de Menus Courants

Type de Menu	Description	Cas d'utilisation Exemple
Menu de Header	Navigation principale du site	Barre de navigation supérieure, liens principaux
Menu de Footer	Liens de footer	Légal, social, plan du site
Menu de Barre Latérale	Navigation par catégorie	Catégories de blog, filtres de produits
Menu Mobile	Navigation spécifique aux mobiles	Menu hamburger, menu tiroir
Mega Menu	Sous-menu complexe avec catégories	Navigation multi-niveaux e-commerce
Fil d'Ariane	Chemin de la page actuelle	Accueil > Produits > Électronique

Pourquoi utiliser le module Menus ?

Avantage	Description
Navigation Dynamique	Récupérer la structure du menu depuis l'API, pas de codage en dur
Multilingue	Menus automatiquement localisés selon la langue
Convivial pour les Administrateurs	Les non-développeurs peuvent mettre à jour la navigation
Structure Hiérarchique	Support pour des menus imbriqués (profondeur illimitée)
Convivial pour le SEO	Relations et structure de page appropriées
Source Unique de Vérité	Une structure de menu utilisée partout

📋 Ce que vous devez savoir

Les Menus sont créés dans le Panneau d'Administration

Vous ne pouvez pas créer de menus via le SDK - ils sont créés dans le panneau d'administration de OneEntry :

Panneau d'Administration OneEntry → Menus → Créer Menu → Ajouter Pages → Enregistrer

Le SDK est destiné à récupérer les structures de menu, pas à les créer.

Important : Les éléments de menu sont des pages configurées dans OneEntry. Vous ne pouvez pas ajouter de liens arbitraires aux menus - chaque élément de menu doit être une page.

Les menus supportent une profondeur d'imbrication illimitée

💡 Notes Importantes

Les Menus sont créés dans le Panneau d'Administration

Rappelez-vous : Le SDK est destiné à récupérer les structures de menu, pas à créer des menus.

Pour créer/éditer des menus : Utilisez le Panneau d'Administration OneEntry ou l'API Admin.

Vous ne pouvez pas ajouter de liens arbitraires aux menus. Chaque élément de menu doit être une page configurée dans OneEntry.

Solution pour les liens externes : Créez des pages avec des URL externes dans OneEntry, puis ajoutez-les aux menus.

Les menus supportent une profondeur d'imbrication illimitée - vous pouvez avoir autant de niveaux que nécessaire.

Support Multilingue

Les menus supportent automatiquement le multilingue basé sur langCode dans defineOneEntry().

Meilleure pratique : Récupérez les menus dans la langue préférée de l'utilisateur.

Mettez en Cache les Menus pour la Performance

Les menus changent rarement - implémentez un cache pour réduire les appels API :

Frontend : localStorage, sessionStorage
Backend : Redis, cache mémoire
TTL : 1 heure recommandée

📊 Tableau de Référence Rapide

Méthode	Description	Cas d'utilisation
getMenuByMarker()	Récupérer le menu par marqueur	Récupérer une structure de menu spécifique

❓ Questions Fréquemment Posées (FAQ)

Les menus supportent une profondeur d'imbrication illimitée. Utilisez parentId pour créer des structures hiérarchiques. Dans le panneau d'administration, vous pouvez imbriquer des pages pour créer des relations parent-enfant qui se reflètent automatiquement dans la structure du menu.

Puis-je ajouter des liens externes aux menus ?

Les éléments de menu doivent être des pages configurées dans OneEntry. Pour ajouter des liens externes, créez des pages avec des URL externes dans le module Pages, puis ajoutez-les à votre menu.

Comparez l'URL de la page actuelle avec chaque pageUrl d'élément de menu. Appliquez une classe/style actif lorsqu'ils correspondent pour mettre en évidence la page actuelle dans la navigation.

Mettez en cache les menus en utilisant localStorage ou sessionStorage car ils changent rarement. Implémentez le chargement paresseux pour les mega menus avec de nombreux éléments imbriqués. Envisagez d'utiliser un menu hamburger optimisé pour mobile pour une meilleure expérience utilisateur.

Utilisez la hiérarchie du menu pour construire des fils d'Ariane. Tracez depuis la page actuelle à travers les relations parentId pour construire le chemin du fil d'Ariane (Accueil > Catégorie > Sous-catégorie > Page Actuelle).

Puis-je avoir des menus différents pour différentes sections ?

Oui ! Créez plusieurs menus avec des marqueurs différents (par exemple, header_menu, footer_menu, sidebar_menu) et récupérez-les séparément en utilisant getMenuByMarker().

🎓 Meilleures Pratiques

Utilisez des marqueurs, pas des IDs - Les marqueurs sont stables à travers les environnements
Mettez en cache les menus - Réduisez les appels API pour des données rarement changeantes
Construisez un arbre récursif - Utilisez parentId pour la structure hiérarchique
Triez par position - Respectez l'ordre d'affichage
Gérez l'état actif - Mettez en évidence la page actuelle
Fournissez des menus de secours - Gérez les erreurs avec grâce
Supportez le multilingue - Utilisez langCode pour la localisation
Optimisez pour mobile - Implémentez une navigation responsive

Plus d'informations sur l'interface utilisateur du module https://doc.oneentry.cloud/docs/menu/introduction_menu

Définition du module Menus

Le module Menus définit la structure et la navigation de votre site.

Le menu est un élément clé de la structure et de la navigation de votre site. Avec le menu, vous offrez aux visiteurs un moyen pratique de naviguer à travers différentes sections de votre application et de trouver les informations dont ils ont besoin.


const { Menus } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

Dans la plateforme OneEntry, vous pouvez créer la structure du menu directement depuis votre compte personnel. Cela vous permet de changer l'ensemble des pages incluses dans le menu, leur ordre et leurs titres sans modifier le code source de votre application.

De plus, si nécessaire, vous pouvez créer des niveaux imbriqués dans le menu, permettant une structure en arbre avec des sections et des sous-sections.

Tout cela vous permet de travailler de manière pratique et flexible avec la navigation de votre application directement depuis votre compte personnel.

Au cœur du menu se trouvent les pages. La structure du menu est créée à partir des pages.

Vous pouvez définir :

Quelles pages seront incluses dans le menu Dans quel ordre elles seront présentées à l'utilisateur Quel titre sera donné à l'élément de menu menant à une page spécifique L'imbrication des éléments de menu (structure en arbre) Certains de ces concepts ont été discutés dans la section des pages, et certains paramètres de page affectent la structure du menu que vous pouvez créer à partir de ces pages.

🔗 Documentation Connexe

Module Pages - Gérer les pages qui composent vos menus
Module Locales - Support multilingue pour la localisation des menus
Module GeneralTypes - Types de pages utilisés dans les menus

Introduction

🎯 Que fait ce module ?

📖 Explication Simple

✨ Concepts Clés

Qu'est-ce qu'un Menu ?

Structure du Menu

Hiérarchie du Menu

Types de Menus Courants

Pourquoi utiliser le module Menus ?

📋 Ce que vous devez savoir

Les Menus sont créés dans le Panneau d'Administration

Les Éléments de Menu sont des Pages

Hiérarchie du Menu (Relations Parent-Enfant)

💡 Notes Importantes

Les Menus sont créés dans le Panneau d'Administration

Les Éléments de Menu doivent être des Pages

La Hiérarchie du Menu est Flexible

Support Multilingue

Mettez en Cache les Menus pour la Performance

📊 Tableau de Référence Rapide

❓ Questions Fréquemment Posées (FAQ)

Comment créer un menu multi-niveaux (navigation déroulante) ?

Puis-je ajouter des liens externes aux menus ?

Comment gérer l'état de l'élément de menu actif ?

Mon menu a trop d'éléments. Comment optimiser la performance ?

Comment créer une navigation par fil d'Ariane ?

Puis-je avoir des menus différents pour différentes sections ?

🎓 Meilleures Pratiques

Définition du module Menus

🔗 Documentation Connexe

Introduction

🎯 Que fait ce module ?​

📖 Explication Simple​

✨ Concepts Clés​

Qu'est-ce qu'un Menu ?​

Structure du Menu​

Hiérarchie du Menu​

Types de Menus Courants​

Pourquoi utiliser le module Menus ?​

📋 Ce que vous devez savoir​

Les Menus sont créés dans le Panneau d'Administration​

Les Éléments de Menu sont des Pages​

Hiérarchie du Menu (Relations Parent-Enfant)​

💡 Notes Importantes​

Les Menus sont créés dans le Panneau d'Administration​

Les Éléments de Menu doivent être des Pages​

La Hiérarchie du Menu est Flexible​

Support Multilingue​

Mettez en Cache les Menus pour la Performance​

📊 Tableau de Référence Rapide​

❓ Questions Fréquemment Posées (FAQ)​

Comment créer un menu multi-niveaux (navigation déroulante) ?​

Puis-je ajouter des liens externes aux menus ?​

Comment gérer l'état de l'élément de menu actif ?​

Mon menu a trop d'éléments. Comment optimiser la performance ?​

Comment créer une navigation par fil d'Ariane ?​

Puis-je avoir des menus différents pour différentes sections ?​

🎓 Meilleures Pratiques​

Définition du module Menus​

🔗 Documentation Connexe​

🎯 Que fait ce module ?

📖 Explication Simple

✨ Concepts Clés

Qu'est-ce qu'un Menu ?

Structure du Menu

Hiérarchie du Menu

Types de Menus Courants

Pourquoi utiliser le module Menus ?

📋 Ce que vous devez savoir

Les Menus sont créés dans le Panneau d'Administration

Les Éléments de Menu sont des Pages

Hiérarchie du Menu (Relations Parent-Enfant)

💡 Notes Importantes

Les Menus sont créés dans le Panneau d'Administration

Les Éléments de Menu doivent être des Pages

La Hiérarchie du Menu est Flexible

Support Multilingue

Mettez en Cache les Menus pour la Performance

📊 Tableau de Référence Rapide

❓ Questions Fréquemment Posées (FAQ)

Comment créer un menu multi-niveaux (navigation déroulante) ?

Puis-je ajouter des liens externes aux menus ?

Comment gérer l'état de l'élément de menu actif ?

Mon menu a trop d'éléments. Comment optimiser la performance ?

Comment créer une navigation par fil d'Ariane ?

Puis-je avoir des menus différents pour différentes sections ?

🎓 Meilleures Pratiques

Définition du module Menus

🔗 Documentation Connexe