Find Ancestors of Item Using the Umbraco Content Delivery API

🧩 The Use Case: Breadcrumbs

I was working on a headless Umbraco project and needed to build a breadcrumb component. Breadcrumbs are small UI components that help users understand where they are in the site hierarchy, improve navigation, and boost SEO.

At first, I thought I’d have to manually stitch together parent nodes. Then I noticed that the Umbraco Content Delivery API has exactly what I needed: the ability to fetch the ancestors of a node.

🛠 Fetching Ancestors by ID

When building with front-end frameworks such as Next.js, you’ll usually have the node's ID available at build time. Using this ID, we can fetch its ancestors directly from the Umbraco Content Delivery API to build a breadcrumb trail.

Example: Here’s the query I used for this example (tested against a project set up with Paul Seal’s Clean Starter Kit):

GET https://localhost:44364/umbraco/delivery/api/v2/content?fetch=ancestors:d28b8bc8-7204-4802-9c2d-6fd7c5a5e0aa&fields=properties[id]

🔍 Breaking Down the Query

• fetch=ancestors:<id> → Finds the node by its ID and returns all of its parent nodes.
• fields=properties[id] → Reduces the response size by returning only IDs (you can add any other fields if needed).

Example Response

{
  "total": 2,
  "items": [
    {
      "contentType": "home",
      "name": "Home",
      "route": { "path": "/" },
      "id": "dcf18a51-6919-4cf8-89d1-36b94ce4d963"
    },
    {
      "contentType": "articleList",
      "name": "Blog",
      "route": { "path": "/blog/" },
      "id": "31523089-f648-4883-9087-ef9a0b83129f"
    }
  ]
}

Note: Ancestor queries return only parent nodes, you’ll need to append the current node separately from its own content data.

The ancestor query gives you:

Home > Blog

Then you append the current node (from its own content data):

Home > Blog > Conferences

🌱 (Bonus) Fetching Descendants

While ancestors are perfect for breadcrumbs, the Delivery API also supports descendants queries. Descendants return all child nodes under a given item, which is useful for building listings, or mega menus.

GET https://localhost:44364/umbraco/delivery/api/v2/content?fetch=descendants:31523089-f648-4883-9087-ef9a0b83129f&fields=properties[id]

🚀 Takeaway

The Umbraco Content Delivery API’s hierarchy queries are powerful tools for solving front‑end problems. Ancestors give you context, descendants give you content and together they make your front‑end dynamic and editor‑friendly.

I hope this helps you understand how we can use the Umbraco Content Delivery API to fetch ancestors and descendants of a node.

For more details on available parameters and options, check out the official Umbraco Content Delivery API documentation.

Oh by the way, Umbraco 17 is out now, why not take it for a spin and see what’s new?

Cover photo by Denise Jans