Guidance for Implementing a Menu

Support
1

I’m wanting to use Squidex as a headless CMS, and I have 1 outstanding problem I need to figure out.

I want to have a site menu, that is ordered and nested (up to 3 levels). I’d like to be able to either define a hierarchy and select the page content as a reference. I’d ideally like to get the menu via GraphQL in 1 hit, but that’s not a deal-breaker as it will be a static site.

I don’t mind the menu being a separate entity, and select the pages for each menu item, or alternatively having it all derived from metadata on the pages (perhaps selecting a parent, and an order number). Whatever gets me there, I just don’t want to be able to list a page after it’s deleted.

Does anyone have a good recipe or advice for me?

2

What kind of menu it it?

This is a personal opinion but I think in many ways thinking about menus does not make that much sense. Here is why:

Very often big menus are a composition of many different content types. Lets say you are a small online shop.

Then you have the top level menu:

  1. Products: A sub menu with one item per product category (could be nested).
  2. Articles: A sub menu with one item per article category.
  3. More: A sub menu with a few static pages: Contact, Terms and so on.

Instead of thinking about the menu I would think about the content types:

  • Product Categories
  • Article Categories

Then I would implement it like this:

  • The top level menu is just hardcoded in your UI.
  • The submenu for “more” are also hardcoded in your UI, because each page is very unique.
  • Products and categories are queried. If you have a very few categories (< 100 or so) I would just fetch them all and resolve the hierarchy in your UI, it is much faster.

I think that a menu definition in a headless CMS is very specific to one UI and does not scale very well when you have multiple frontends or big changes like a redesign.

3

Thanks @Sebastian

I think you are right in general. Here I am porting from an Umbraco system I’ve inherited, and it has the concept of a hierarchy, so pages have a breadcrumb bar, and a some of these pages are flagged as appearing in the menu, otherwise they are omitted.

Example: https://www.wellingtonchurch.com/church-life/special-occasions/funerals/

I’m going to have a rethink, because if I try to replicate what is there then it could quickly end up a mess (again, honestly Umbraco is a mess).

4

Yes, I understand that, it is a typical pattern in a traditional CMS.

But in a headless CMS the best approach is to be as independent from your frontend as possible.

1 Like