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.

In this video I'm going to show you how to create multilevel navigation in Directus 9, without any code.

How To Create Multilevel Navigation In Directus 9 (NO CODE)

Currently we are passing the data to the navigation component with prop drilling. Nothing wrong with that, but sometimes that can get pretty complex so you have to use other strategies to get the data from one component to another. That is why we are going to use Context API in this episode, and get rid of prop drilling to get the data to our navigation component. Also I'm going to show you how to create simple state management using Context API.

In this episode we are going to use React Context API to get the data for our navigation and also to create a simple state management.

Using Context API

We will actually cover a lot of stuff in this episode. First of all I'm going to show you how to create normal and nested routes (however we are not going to learn about dynamic routes in this episode). Then I will show you how to use Nexts `<Link />` component. Then we are going to create our own Navigation component that will link our site together and also how to make those links give visual feedback to the user, so that the user knows on which page he or she is currently on.

This Navigation is going to be hard coded, which is not ideal, so we are going to create that navigation in Strapi, and make it dynamic so that we don't have to hard code it, cool.

Also you are going to learn the difference between `getInitialProps()` and `getServerSideProps` and how to correctly get environment variables with `getConfig()`.

In this episode we are going to talk about Next.js Routing, Nested Routes, Link component and we are also going to create a dynamic Navigation for our Next site.

Static Routes, Nested Routes,  And Navigation

So of course since we are using WordPress as our admin and REST API we don't want to hard code our navigation into Sapper and Svelte. We actually want to display that menu from WordPress in our app, and since we are displaying the menu, and menu links to pages, we of course also want to display WordPress pages in our Sapper and Svelte app. And I'm going to show you how to do that in this episode.

In this episode we are going to learn how to display navigation from our WordPress installation and display it in our Sapper and Svelte app