Strapi Navigation Menu without Plugins

I started working on Strapi, and I find it interesting but there are some small shortcomings. I’ll create, from now on, a series of articles to keep track of solved problems.

Photo by Aaron Burden on Unsplash

I start with the navigation menu. There are two plugins to manage that but I don’t like to start using plugins also for basic requirements, so I decided to find an alternative using only the “Content-Type Builder”.

To start I created a Single Types named “Nav” in which I have:

├── uuid
├── links // Component (repeatable)
│   ├── URL
│   ├── sublinks // Component (repeatable)
│   │   ├── URL

Content Type Builder

Content Manager

The structure is straightforward, is basic but it’s simple from that to evolve by adding custom classes, targets, and so on.

You need to make the “Nav” public, so go to:

Settings => Users and Permissions Plugin => Roles => Public=> Nav

Get devinred 🎈’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

and enable “find”.

Now you can check the response by using this URL: http://localhost:1337/api/nav

{
  "data": {
    "id": 1,
    "attributes": {
      "createdAt": "2023-04-12T09:42:27.501Z",
      "updatedAt": "2023-04-12T10:06:17.082Z",
      "publishedAt": "2023-04-12T09:43:59.839Z",
      "uuid": "nav"
    }
  },
  "meta": {
    
  }
}

As you can see something’s missing, we need to populate our links, so:

http://localhost:1337/api/nav?populate=links

{
  "data": {
    "id": 1,
    "attributes": {
      "createdAt": "2023-04-12T09:42:27.501Z",
      "updatedAt": "2023-04-12T10:06:17.082Z",
      "publishedAt": "2023-04-12T09:43:59.839Z",
      "uuid": "nav",
      "links": [
        {
          "id": 5,
          "url": "link 1"
        },
        {
          "id": 6,
          "url": "link 2"
        },
        {
          "id": 7,
          "url": "link 3"
        }
      ]
    }
  },
  "meta": {
    
  }
}

Better but we need also to populate our sublinks, so here is the final URL:

http://localhost:1337/api/nav?populate[links][populate]=sublinks

{
  "data": {
    "id": 1,
    "attributes": {
      "createdAt": "2023-04-12T09:42:27.501Z",
      "updatedAt": "2023-04-12T10:06:17.082Z",
      "publishedAt": "2023-04-12T09:43:59.839Z",
      "uuid": "nav",
      "links": [
        {
          "id": 5,
          "url": "link 1",
          "sublinks": [
            {
              "id": 5,
              "url": "sublink 1-1"
            },
            {
              "id": 6,
              "url": "sublink 1-2"
            }
          ]
        },
        {
          "id": 6,
          "url": "link 2",
          "sublinks": [
            
          ]
        },
        {
          "id": 7,
          "url": "link 3",
          "sublinks": [
            {
              "id": 7,
              "url": "sublink 3-1"
            }
          ]
        }
      ]
    }
  },
  "meta": {
    
  }
}

Now we have our menu, with nested arrays, ready to be served with a classic loop in our app.

Have you found another way? I’ll be glad to try also a different approach.