When working with structured content in Contentful – such as multi-level pages, nested categories, or organisational charts – it’s often not enough to see a single referenced item. Editors and developers may need to understand where that item fits in the broader hierarchy.

This blog post walks through how to build a React sidebar extension using Contentful’s App Framework that shows the ancestor chain of a referenced item – helping users quickly visualize its place in the structure.

Why Seeing Ancestors Helps with Hierarchical Content

In many content models, entries reference others to form a parent-child relationship. For example:

• A subpage belongs to a parent page, which in turn belongs to a section
• A location exists within a region, which exists within a country
• A role belongs within a department, which rolls up into a business unit

Showing this hierarchy like:

Company > Sales Department > Field Team > Regional Manager

makes it easy for editors to understand structure and verify that an entry is placed correctly.

Benefits

• Clarity: Editors immediately see where the entry belongs.
• Fewer Clicks: Avoid navigating through multiple entries to check relationships.
• Faster QA: Reviewers can audit hierarchy in one glance.
• Better Governance: Supports structured publishing processes.

Why the Sidebar Is Ideal

Contentful’s sidebar is the perfect location for read-only helpers like this. It remains visible without cluttering the editor, and it’s persistent as editors scroll or switch fields.

Why did I get asked to try and solve this?

If your on a Contentful content entry you can easily click on the references tab and see the ‘children’

That’s great if you’re at the root level, also you have the link next to the name. This also shows the immediate parents.

This doesn’t show any ancestors above that.

How to Build the Sidebar App

You can create your own with:

• Contentful App Framework – Follow the online guides and setup a new repo
• Contentful API token – Get this from your Contentful instance
• Contentful with a hierarchy content type – Create this in your instance
• Some React knowledge – Build this in the Sidebar.tsx.

Code example

Basic logic is load your item then call the following

GET https://cdn.contentful.com/spaces/{SPACE_ID}/environments/{ENVIRONMENT_ID}/entries?links_to_entry=entryId123&access_token={ACCESS_TOKEN}

Basically recursing upwards until you have no more links of which ever type is your hierarchy.

Lastly render out your hierarchy as a tree.

Output

Below is an example showing places and a location hierarchy.

Conclusion

Whether you’re managing structured pages, business hierarchies, or content containers, adding an ancestor viewer to Contentful’s sidebar is a simple and powerful way to improve your editorial workflow. With just a few lines of code, you can turn disconnected references into meaningful structures.