Menu Data Source

8 min

Overview

The menu data source fetches menu items from the Catalog API. Menus are defined and managed by editors in the CMS, and this data source makes them available to navigation components in the app.

When to use this

Use menu when navigation items should be controlled by editors through the CMS rather than hardcoded in views.json. If the navigation is static and never changes, use custom instead.

Basic Example

{
    "type": "menu",
    "contextKey": "mainNav",
    "filter": {
        "name": { "value": "main-navigation" }
    }
}

Configuration

Type-specific properties

Property	Type	Default	Description
filter	object	—	Selects which menu to load (server-side, filters on the menu itself)
itemFilter	object	—	Filters items within the loaded menu (client-side, evaluated per item)
fetchOptions	object	—	Optional fetch request options (e.g. totalCount: false)

For common properties (contextKey, limit, batchSize, etc.) see Data Sources Overviewdata

Filter key	Type	Description
name	StringFilter	Match menus by name
properties	MapFilter	Match menus by custom property

Supports AND and OR. Does not support condition — use itemFilter for conditional logic.

itemFilter properties (StorefrontMenuItemFilter — filters items within the menu)

Filter key	Type	Description
name	StringFilter	Include only items matching this name
parentId	StringFilter	Include only items under a specific parent
properties	MapFilter	Filter items by custom property

Supports AND, OR, and condition.

Advanced Features

Filtering items by condition

Use itemFilter with a condition to hide menu items based on context:

{
    "type": "menu",
    "contextKey": "mainNav",
    "filter": { "name": { "value": "main-navigation" } },
    "itemFilter": {
        "condition": {
            "value": "$context.user.isLoggedIn",
            "operation": "EQUALS",
            "compareValue": "true"
        }
    }
}

Testing Notes / Edge Cases

Menu is selected by filter.name: There is no menuId property. A wrong name returns an empty list silently.

filter vs itemFilter: filter runs server-side to select which menu to load. itemFilter runs client-side per item. Only itemFilter supports condition.

Item order: Items are sorted client-side by their sortIndex field — the API does not guarantee order. The final order always reflects the sortIndex set in the CMS.

Editor updates: Menu changes are subject to maxCacheAge — changes may not be immediately visible.

Empty menu: A menu with no items (or all items filtered out) returns an empty list.

Data Sources Overviewdata