Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.frontic.com/llms.txt

Use this file to discover all available pages before exploring further.

Preview — this feature is under active development. The API shape may still evolve.
A Menu Tree returns a hierarchical collection of records — navigation menus, category trees, support article hierarchies, anything with a parent/child structure. Manage your trees in the API Builder section of the admin app.

​
How it works

A Menu Tree has two sides: how records connect into a hierarchy, and what each node looks like when it comes back.

​
Structure

A Menu Tree reads records from a Data Storage and assembles them into a tree using two default fields:
  • parentKey — links each record to its parent node.
  • position — numeric sort order among siblings. Always present on storages used by a Menu Tree.

​
Node shape

One Detail Block defines the node shape for the whole tree. Every record returned — the root, every child, every grandchild, all the way down to the leaves — is rendered through that same block, so the payload stays consistent at any depth. On top of that, Frontic attaches a single tree-level property, $children, to each node to carry its subtree. Everything else on a node comes straight from the block you picked.
Menu Trees don’t hold their own data — they read records from a Data Storage and render each node through a Detail Block. Make sure the block you want to serve already exists and is connected to the storage before creating a tree.

​
Create a tree

Head to the API Builder and click Create Tree.
  • Name — the tree’s identifier (used in the slug), e.g. CategoryNavigation, Support
  • Storage — which Data Storage the nodes come from
  • Node block — the Detail Block that shapes each node’s response
  • Level — for commerce storages, choose whether nodes are product-level or variant-level

​
Fetch a tree

// Full tree
const tree = await client.tree("CategoryNavigation");

// Subtree from a specific node, 2 levels deep
const tree = await client.tree("CategoryNavigation", {
  key: "shop",
  depth: 2,
});

​
Parameters

​
key
string
Optional starting point. When provided, the response returns the node with this key and its descendants. Without a key, the full tree from the root is returned.
​
depth
number
Optional level limit. Controls how many levels of $children are included in the response.

​
Response

{
  "key": "shop",
  "name": "Shop",
  "link": {
    "slug": "shop",
    "path": "/en/shop",
    "url": "www.demo-shop.com/en/shop",
    "href": "https://www.demo-shop.com/en/shop"
  },
  "$children": [
    {
      "key": "women",
      "name": "Women",
      "link": {
        "slug": "shop/women",
        "path": "/en/shop/women",
        "url": "www.demo-shop.com/en/shop/women",
        "href": "https://www.demo-shop.com/en/shop/women"
      },
      "$children": [ /* ... */ ]
    },
    {
      "key": "men",
      "name": "Men",
      "link": { "slug": "shop/men", "path": "/en/shop/men", "href": "https://www.demo-shop.com/en/shop/men" },
      "$children": [ /* ... */ ]
    }
  ]
}
Each node’s shape (beyond key and $children) is defined by the Detail Block you selected. In this example, the block carries a Route field named link that resolves to each node’s Page URL in the caller’s locale and region.
Field names starting with $ are reserved. You cannot use them in your Data Storage schemas — Frontic uses the $ prefix for tree-level metadata like $children.

​
Limits

A single Menu Tree response is capped at 1,000 nodes total. Frontic resolves the tree level by level — if an entire level doesn’t fit within the remaining budget, the whole level is omitted (partial levels are never returned) and a warning is included in the response header. For large hierarchies, pass a key and depth to fetch the subtree you actually need instead of the whole structure.

Detail Blocks

Shape each node’s response.

Data Storages

Where tree records live, with parentKey and position as default fields.

Page URLs

The link target each menu node points at via the Route field.