Viewer named Robert commented on one of the videos asking how to create a multilevel navigation in Directus 9 so that you can consume it through the API and that way create a navigation on the frontend.

Unfortunately I wasn’t able to find a perfect no code way of doing this, so I don’t think that Robert will be very pleased with the result, since he already knows about this method. Sorry Robert.

However I think this is a good enough way to create multilevel navigation, it’s not perfect by any means, but it is good enough if your site or app does not heavily depend on multilevel navigations with a lot of levels.

But if you need a way to allow users of your backend to create navigations, like Main navigation, Footer navigation, maybe navigation on a sidebar, with 2 or 3 levels - this way of doing things is going to be more than adequate.

Let me show you how.

Setup

For this demo I’m using Directus version 9.14.5, but I guess this method should work on any version that supports Repeater fields.

First of all I will create a collection called Menus.

This collection is going to have only two fields - one is going to be called title, so that we can name our menus and so that we can filter them by name on the frontend.

The other field is going to be a repeater field and that is where we are going to define our menu items.

Let’s create repeater field, give it a name of menu_items

Next let’s create two fields for the repeater - they are going to be called label and url and both are going to be just strings with input interface.

And by just doing this we created a system for single level navigation.

However we want a multilevel navigation. So let’s create one more field, and this one is going to be of type JSON and with the repeater interface. We are going to call it submenu and it is also going to consist of two fields called label and url .

And I think you can now see where I’m going with this. If you need three levels you would add one more repeater here and so on.

Of course if you need unlimited levels and you depend on that functionality, then maybe it’s best to try to find a code based solution for this problem.

But from my experience two or three levels are going to be enough for at least 90% of cases.

Ok, let’s save this and test it out.

Create Menu

We go to Menus, create new add a title of “Main navigation”.

And then on “Menu Items” you click “Create new” and start creating your menu items.

The first one is “Home” and it’s going to be only single level.

The second one is “About” and here we are going to add a few subitems.

And let’s create one more, called “Contact” which is going to be single level item.

And that is it.

API response

Let’s see how this is going to look when we try to get the menus from the API.

First we go to “Roles and Permissions” . Click on “Public” and allow everyone to be able to see our navigations.

Now go to /items/menus. And here we can see how this looks in JSON format that we can consume on our frontend.

One nice thing is that we can rearrange the menus in the backed, and that will reflect on our data.

So now we have “Home”, “Contact” and “About”.

You can do the same thing with submenu items.

Nice.