Skip to main content

Introduction

🎯 What does this module do?​

The Menus module lets you retrieve site navigation structures - header menus, footer menus, sidebar navigation, mobile menus - dynamically building multi-level navigation from pages configured in OneEntry.

Think of it as your navigation manager - you create menus in OneEntry admin panel (linking pages together), and this module fetches the complete menu tree structure, so you can render navigation dynamically without hardcoding links.

📖 Simple Explanation​

Every website needs navigation to help users find content:

  • Header Menu - Main navigation (Home, About, Services, Contact)
  • Mobile Menu - Hamburger menu with dropdowns
  • Sidebar Menu - Category navigation (Blog categories, product filters)
  • Footer Menu - Legal links, social links, sitemap
  • Mega Menu - Complex dropdowns with images and categories
  • Breadcrumbs - Current page path (Home > Products > Electronics)

Issues:

  • Hard to update - Need to redeploy code to change menu
  • No multi-language support - Different menus for each language
  • Not admin-friendly - Developers needed for every change
  • Menu duplication - Same menu hardcoded in multiple places

The Menus solution:

Benefits:

  • Easy updates - Change menus in admin panel, no redeployment
  • Multi-language - Menus automatically localized
  • Admin-friendly - Non-developers can manage navigation
  • Single source of truth - One menu structure everywhere

✨ Key Concepts​

What is a Menu?​

A Menu is a navigation structure that contains links to pages:

  • Menu Items - Individual navigation links (pages)
  • Hierarchy - Nested structure (parent → children)
  • Ordering - Display order of items
  • Localization - Translated titles per language
  • Dynamic - Fetch structure from API, render in your app

Each menu has this structure:

{
  id: 123,
  identifier: "header_menu",          // Unique identifier
  localizeInfos: {
    title: "Main Header Navigation"   // Menu title
  },
  pages: [                            // Menu items (pages)
    {
      id: 1,                          // Page ID
      pageUrl: "/home",               // Page URL
      localizeInfos: {
        title: "Home",                // Display in page
        menuTitle: "Home"             // Display in menu
      },
      attributeValues: {},            // Attribute values
      parentId: 0,                    // Top-level item
      position: 1                     // Display order
    }
  ]
}

Menus support nested structures (multi-level navigation):

📂 Header Menu
├─ 🏠 Home (depth: 0, parentId: 0)
├─ 📖 About (depth: 0, parentId: 0)
│  ├─ 👥 Team (depth: 1, parentId: 2)
│  ├─ 🏢 Office (depth: 1, parentId: 2)
│  └─ 📜 History (depth: 1, parentId: 2)
├─ 🛍️ Products (depth: 0, parentId: 0)
│  ├─ 💻 Electronics (depth: 1, parentId: 4)
│  │  ├─ 📱 Phones (depth: 2, parentId: 5)
│  │  └─ 💻 Laptops (depth: 2, parentId: 5)
│  └─ 👕 Clothing (depth: 1, parentId: 4)
└─ 📞 Contact (depth: 0, parentId: 0)

Common Menu Types​

Menu TypeDescriptionExample Use Cases
Header MenuMain site navigationTop navigation bar, primary links
Footer MenuFooter linksLegal, social, sitemap
Sidebar MenuCategory navigationBlog categories, product filters
Mobile MenuMobile-specific navigationHamburger menu, drawer menu
Mega MenuComplex dropdown with categoriesE-commerce multi-level navigation
BreadcrumbsCurrent page pathHome > Products > Electronics

Why Use Menus Module?​

BenefitDescription
Dynamic NavigationFetch menu structure from API, no hardcoding
Multi-LanguageMenus automatically localized based on locale
Admin-FriendlyNon-developers can update navigation
Hierarchical StructureSupport for nested menus (unlimited depth)
SEO-FriendlyProper page relationships and structure
Single Source of TruthOne menu structure used everywhere

📋 What You Need to Know​

You cannot create menus via the SDK - they're created in the OneEntry admin panel:

OneEntry Admin Panel → Menus → Create Menu → Add Pages → Save

The SDK is for fetching menu structures, not creating them.

Important: Menu items are pages configured in OneEntry. You cannot add arbitrary links to menus - every menu item must be a page.

Menus support unlimited nesting depth

💡 Important Notes​

Remember: The SDK is for fetching menu structures, not creating menus.

To create/edit menus: Use OneEntry Admin Panel or Admin API.

You cannot add arbitrary links to menus. Every menu item must be a page configured in OneEntry.

Workaround for external links: Create pages with external URLs in OneEntry, then add them to menus.

Menus support unlimited nesting depth - you can have as many levels as needed.

Multi-Language Support​

Menus automatically support multi-language based on langCode in defineOneEntry().

Best practice: Fetch menus in user's preferred language.

Cache Menus for Performance​

Menus rarely change - implement caching to reduce API calls:

  • Frontend: localStorage, sessionStorage
  • Backend: Redis, memory cache
  • TTL: 1 hour recommended

📊 Quick Reference Table​

MethodDescriptionUse Case
getMenuByMarker()Get menu by markerFetch specific menu structure

❓ Common Questions (FAQ)​

How do I create a multi-level menu (dropdown navigation)?​

Menus support unlimited nesting depth. Use parentId to create hierarchical structures. In the admin panel, you can nest pages to create parent-child relationships that automatically reflect in the menu structure.

Menu items must be pages configured in OneEntry. To add external links, create pages with external URLs in the Pages module, then add them to your menu.

How do I handle the active menu item state?​

Compare the current page URL with each menu item's pageUrl. Apply an active class/style when they match to highlight the current page in navigation.

My menu has too many items. How do I optimize performance?​

Cache menus using localStorage or sessionStorage since they rarely change. Implement lazy loading for mega menus with many nested items. Consider using a mobile-optimized hamburger menu for better UX.

How do I create a breadcrumb navigation?​

Use the menu hierarchy to build breadcrumbs. Trace from the current page up through parentId relationships to build the breadcrumb path (Home > Category > Subcategory > Current Page).

Can I have different menus for different sections?​

Yes! Create multiple menus with different markers (e.g., header_menu, footer_menu, sidebar_menu) and fetch them separately using getMenuByMarker().

🎓 Best Practices​

  • Use markers, not IDs - Markers are stable across environments
  • Cache menus - Reduce API calls for rarely-changing data
  • Build recursive tree - Use parentId for hierarchical structure
  • Sort by position - Respect display order
  • Handle active state - Highlight current page
  • Provide fallback menus - Handle errors gracefully
  • Support multi-language - Use langCode for localization
  • Optimize for mobile - Implement responsive navigation

More information about the module's user interface https://doc.oneentry.cloud/docs/menu/introduction_menu

Definition of the Menus module​

The Menus module defines the structure and navigation of your site.

The menu is a key element of the structure and navigation of your site. With the menu, you provide visitors with a convenient way to navigate through different sections of your application and find the information they need.


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

In OneEntry Platform, you can create the menu structure directly from your personal account. This allows you to change the set of pages included in the menu, their order, and titles without modifying the source code of your application.

Additionally, if necessary, you can create nested levels in the menu, allowing for a tree-like structure with sections and subsections.

All of this enables you to work conveniently and flexibly with the navigation of your application directly from your personal account.

At the core of the menu are pages. The menu structure is created from pages.

You can define:

Which pages will be included in the menu In what order they will be presented to the user What title will be given to the menu item leading to a specific page The nesting of menu items (Tree structure) Some of these concepts were discussed in the pages section, and some page settings affect the menu structure you can create from these pages.

🔗 Related Documentation​