Shop Navigation

General

With the navigation, you can create menus with multiple levels for your frontend. Individual menu items can be linked to individual links, shop categories, or pages. You can set each menu item as temporary. You can also add images for menu items and define navigation items as searchable, for them to be returned through our endpoints /v2/suggestions and /v2/resolve.

Typical use-cases for navigations managed by SCAYLE are:

• Top Navigation Menu
• Footer Menu

But you're not limited to this. SCAYLE can handle multiple menus for the same shop.

Time-Schedule visibility of navigation items

Navigation Items can be time-scheduled with a start- & end date time setting.
This makes it very comfortable to plan seasonal changes in advance for shop managers.

There are three options for setting the visibility of a menu item:

• Set the visibility upon the creation of the menu item.
• Adjust the visibility in the edit mode of the menu item.
• Adjust the visibility via the dashboard.

The procedure to set visibility via edit mode is as follows:

1. Click the pen icon on the right of the dashboard to enter edit mode of a menu item.
2. Click the clock icon to set the period in which the menu item shall be visible.
3. Enter a Start date and End date.
4. Click Save.

Assets for navigation items

If you want to show some media assets (such as teaser graphics or icons) for rendering your navigation you can upload assets in the SCAYLE Panel. Those assets are automatically put to the CDN and the links are responded via the Storefront API.

Manage navigation in SCAYLE Panel

Create a new navigation on the global-level as follows:

1. Navigate to Shops ➜ [Shop] ➜ Storefront ➜ Navigation.
2. Click + New Navigation.
3. Assign a Menu Name.
4. Click + New Menu Item.
5. Fill in the mandatory fields: Name and Target URL for the landing page that the menu item is referencing to. As a target, you can set an Individual link, a Page, or a Category. The type individual link allows you to enter anything without validation.
6. Optionally, set the Visibility and Assets. For Visibility you can pick a start/end date. If you do so, the menu item will only be visible within this period. For Assets, you can upload an image in SVG format.
7. Click Add Item.

Use the + button below each menu item to add add submenus. You can change the order and the hierarchy level of your menu via drag and drop.

Storefront API

Use the Storefront API to receive your navigations in a fast & efficient way to render them on your mobile app or storefront application.

Get a Single Navigation Tree

The Navigation is identified by the navigationTreeId which you can get from the SCAYLE Panel.

TypescriptPHP

Copy

Get all Navigation Trees

You can retrieve a list of all navigation trees by using this method.

TypescriptPHP

Copy

Response

json

Copy

Retrieve and Filter Navigation Items by Visibility

The API also supports filtering the Navigation Items based on their visibility configuration and a given timestamp.

Each item's visibleFrom and visibleTo properties determine whether it is included in the response, ensuring that only items active at the given time are returned. This is particularly useful for dynamically displaying menus or navigation structures according to scheduled visibility rules.

For details on panel configuration, see Time-Schedule visibility of navigation items.

Visibility Rules:

• No visibleFrom and no visibleTo → always visible.
• Only visibleFrom → visible from that date onward.
• Only visibleTo → visible until that date (exclusive).
• Both visibleFrom and visibleTo → visible within the range ([from, to]).
• If an item is not visible, its entire subtree is excluded.

Date Format: RFC3339

Example: filters[visibleAt]=2025-07-10T15:00:00Z

TypescriptcURL

Copy

// Get all navigation trees with visible navigation items const navigationTrees = await client.navigation.getAll({ visibleAt: '2025-07-10T15:00:00Z', }); console.log(navigationTrees[0].items[0].name); // "Visible Always" // Get a single navigation tree with visible navigation items const navigationTree = await client.navigation.getById(1, { visibleAt: '2025-07-10T15:00:00Z', }); console.log(navigationTree.items[0].name); // "Visible Always"

Response

json

Copy

Enriching Navigation Items with Category Information

When you link your Navigation Items to categories within the SCAYLE Panel, it can be helpful to directly retrieve the full category information within the same Storefront API request. This practice is highly efficient as it allows you to avoid making subsequent API calls to fetch details for each category.

To do this, you can use the with parameter in your request to specify that the category data should be included for each navigation item.

Fetching Navigation with Category Data

The following examples show how to retrieve one or all navigation trees, enriching each navigation item with its associated category data.

TypescriptcURL

Copy

Response

json

Copy