Hierarchical menu with Contentful

Question

Contentful has a notion of "Links" which can be to many objects or one. However I can't find a way to model the reverse relationship without doubling the work (i.e. specify the children AND parent of each object).

I would like to use Contentful to power a simple navigation like so:

• Menu Item 1

  • Sub menu item 1
  • Sub menu item 2
  • Sub menu item 3

• Menu Item 2

  • Sub menu item 4
  • Sub menu item 5
  • Sub menu item 6
    -- Sub sub menu item 1

Where the links might look like /<parent.slug>/<child.slug>/<child.slug>/

I could find the page entry to render by traversing up the parent relationships to ensure I get a page with a slug, and a parent with a specific slug.

However, It's hard to render out child menu items without resorting to multiple API calls unless you include a "children" field in the object - which is prone to error and inconsistency.

Answer 1

Yes we had this same issue. We have a Page model, with a refLink called 'parentPage'. Our middleware makes 1 call to CF to get ALL pages and builds a site tree model in memory.

From this model we have methods to get children, and get URL slug.