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)

Let’s talk a bit about WunderGraph and what it is. 

WunderGraph claims that it provides “The best developer experience for working with APIs”. 

Now, I don’t want to call something I’ve been playing around with for a few days “THE BEST” in anything, but I’ve got to say that working with WunderGraph is pretty darn good, and overall a nice experience. 

Now, what does WunderGraph do?

Well, to put it into most simple of terms, WunderGraph will connect to all of your APIs and become a central spot for getting and updating data from your APIs. 

And I’m saying APIs here, but I should probably be using the term data sources. 

Because WunderGraph has the ability to merge multiple data sources into a single source with which you can communicate to display, update or add data using GraphQL. 

Now, those data sources can be Databases, GraphQL APIs or REST APIs. So WunderGraph will essentially become a middleware between your data and your application, which can be either a web applications or a mobile applications, and it will provide you with a single GraphQL API with which you will communicate.

And if you are building a React or Next.js application it will automatically generate hooks for you that will make displaying, adding and updating your data a breeze, as you will see in this video. 

WunderGraph will also take care of Caching, Security, Permissions, Authentication and Realtime data for you.

Now since this is a “Let’s Checkout...” video I’m not going to go very deep into WunderGraph, because the point of these videos is for me to present technologies that I find interesting. And hopefully spark interest in them in you also. And then if you find it interesting you can take a deep dive yourselves. 

Also please don’t ask me questions about WunderGraph and how to do something with it. I’m a noob at it just like you. If you wanna ask questions about WunderGraph you can join their Discord server or Subreddit, and ask it there.

In this video we are going to connect to our API from [“Directus and Nextjs” series](https://watch-learn.com/courses/directus9-nextjs), using WunderGraph. And then using hooks that are generated for us we are going to get the data on the client side only, and then I’m going to show you how to get initial data on the server side. Also we are going to add some data to our API with provided hooks, and I’m going to show you how to display newly added data live once you add it.

In this video we are going to checkout WunderGraph, the solution for combining all of your APIs into a single source and much more.

Let's Checkout... WunderGraph

We are still going to do a bit of clean up, since Directus development is moving at a break neck pace, but mostly because I’m publishing these videos very slowly, because of some personal issues that have been going on this whole year, but are kind of winding down for a bit at the moment. So I’m hoping I will be able to pick up the pace with the publishing and recording of these videos. 

And I promise that after this video we are going to start creating interesting things, and not just install and update stuff.

So Directus is already at the version 9.4.1 at the time of this recording and in this episode we are going to update it, AGAIN, fix some updating errors and also we are going to install GraphQL play ground which will make creating our queries much easier.

In this episode we are going to do a bit more cleanup (sorry), before building our app.

Fix No Access Issue, Update Database, Install GraphQL Playground

You guys seemed to like my last video about Directus 9, and many of you reached out and asked for more Directus 9 content. So I decided to make it a series where we will be using Directus 9 as our API and CMS, and of course Nextjs for the frontend of our site. Kind of like we did with Strapi and Nextjs series. 

This time however we will add Tailwind into the mix and also include React Query right from the start for better performing API requests, caching, state management and so on. Oh, and also instead of using REST API we are going to use GraphQL for this series. 

Also I can't think of a better time to start this series, Vercel just released Nextjs 12, which brought with it some major changes and improvements to the framework, Directus is still in Beta or Release Candidate phase, much has changed on that front from the latest video so this would be a great time to check everything out. 

The goal of this series is to create a website and publish it online, we will be using Digital Ocean for that. And also near the end of the series I'm going to show you how to implement automatic deployments using Github Actions. Just like I did for my website. 

But before all that we have to start somewhere, the goals for this episode will be:

- Installing Directus 9
- Next.js
- Tailwind
- React Query
- Creating a collection in Directus 9 and display it on page with GraphQL

In this first episode of Nextjs and Directus series we are going to set everything up and fetch some data to see if everything is working properly.

Install Next, Directus, Tailwind, React Query, GraphQL And Fetch Data

As you will see deploying Gatsby to GitHub pages would be extremely easy if I didn't make some errors in the [previous episode](http://watch-learn.com/video-tutorials/gatsby-wordpress-displaying-images). Luckily those errors are pretty easy to fix. So we will be doing that in this episode.

In this final episode of Gatsby and WordPress tutorial series we are going to deploy our site and fix some errors that I made in previous episode.

Deploying and Fixing Errors

Now we are going to be displaying our images on our post list page and also on single post. You are also going to learn how to use gatsby-image component and how to use regular img tags with your images on Gatsby.js and Wordpress site.

Of course we are going to be creating GraphQL query so that the React.js would get the correct data.

In this episode you are going to learn how to display images on your Gastby.js and WordPress site.

Displaying images

Advanced Custom Fields is one of the essential WordPress plugins so it's fitting that Gatsby.js comes with it right out of the box. So in this episode I'm going to show you how to display your ACF fields on your Gatsby.js website. As you will see it is suprisingly easy.

In this episode I'm going to show you how you can use Advanced Custom Fields for WordPress with our Gatsby.js site.

Advanced Custom Fields

To do this we are going to use[gatsby-paginate](https://www.npmjs.com/package/gatsby-paginate) plugin, make some changes to `gatsby-node.js` and create a new Gatsby template for our posts that are coming from our WordPress instalation.

In this episode we are going to be creating simple pagination for our WordPress and Gatsby.js site.

Pagination

Now we are going to crate a new React.js component which will serve as sort of partial on our site. By making it a component we will be able to display our main menu anywhere we want on the site. And by using GraphQL we will have access to all our menu items and the information stored in them.

Also I'm going to fix two mistakes that I made in the [previous video](http://watch-learn.com/video-tutorials/listing-posts).

In this episode I'm going to try to import WordPress menu into our Gatsby.js site, using WP REST API and GraphQL

Tutorials tagged with: graphQL

Get in touch