Hierarchical menu with Contentful

Viewed 3143

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.

2 Answers
Related