How to Create an Ionic 4 Side Menu with Sub Menu Items [v4]

ionic-4-side-menu-sub-items

Creating a side menu with Ionic 4 isn’t that hard, but sometimes you need a multilevel navigation like an accordion to present your information in a more structured way.

In this Quick Win we’ll build a side menu with sub menu items, almost like we did for our Pizza app accordion view. We don’t need any external plugins, all of this can be done easily with Ionic and some CSS!

ionic-4-sub-menu-items

Setting up our App

As said we just need a blank Ionic app as a starting point and some additional pages in order to navigate around in our app so go ahead and start like this:

Now we need to get our routing right and set our menu to be the initial page of our app. Therefore, change your app/app.module.ts to:

You might wonder where all of our routing is. But we need to add it to the pages/menu/menu.module.ts in order to make all the menu entries children of the actual menu component. Ok we could have done so at the top as well but I think having the menu navigation in makes more sense in terms of the general structure, so now add the routes like this:

Although they will be sub menu items we don’t need any additional level of complexity here, just add them as you would add any other page!

Before we dive into the menu, also make sure that your 3 pages :

  • pages/ionic/ionic.page.html
  • pages/flutter/flutter.page.html
  • pages/main/main.page.html

all got the menu button inside their header so we can toggle the menu from everywhere inside the app later:

Now you basically got a blank app and nothing works because we haven’t added the menu yet so let’s change that.

Creating the Menu With Sub Menu

Now it’s time to create the structure of your menu. Therefore we can keep the information inside our class inside the pages variable, but you could also pull this information from a server of course!

The importance when creating a menu or accordion is to have some structure inside your data. In our case, the pages contain both one direct link and then a section “Cool Frameworks” that holds additional children. If you want to go even deeper, there could be another element like this to have a third level or even more in!

We don’t need anything else so simply change your pages/menu/menu.page.ts to:

Now we just need to make use wisely of the information got. For this, we can start by using an iteration over all the pages that we got.

The problem now is that we can’t just simply wrap the ion-menu-toggle around all items like usually because then the menu would be hidden even if we only click on the category header that expands our sub items!

Therefore we need a switch and only use the menu toggle directly for the items that don’t have children (or simply got an URL).

The other items will be a button that simply sets an open property on the item of the iteration which then helps to:

  • Set the parent-active class on the item
  • Show a different icon for open/closed sub list
  • Display the sub item list which holds the children

This means once we click this special button, the list of children will open in which we simply got another list that holds the items of the children array. All of these use basically the same syntax like the regular item at the top, we could even refactor this and have one component for a menu entry that navigates (that’s left to the reader).

Now go ahead with your pages/menu/menu.page.html and change it to:

Everything else around our sub menu implementation is just the regular Ionic menu which you might have seen in our other quick win on building a menu.

Now this will already look pretty good, but even better with some additional CSS so open your pages/menu/menu.page.scss and change it to:

Now we also got a nice activated color for the active item and a better visual representation for the open sub menu items and their header as well!

Conclusion

Building any type of accordion with Ionic isn’t that hard if your data is well structured with different levels that you can distinguish. If your syntax of components doesn’t immediately works try to combine other components or change their order, most of the time this works without tricky CSS that has the potential to break everything later on one platform anyway!

You can also find a video version of this Quick Win below.

Read Next..

Add Social Sharing to Your Ionic App If you can let your users share the content of your app you have a greater chance of creating a buzz or viral app. The good thing is adding this funct...
How to Use Font Awesome With Ionic 4 The built in Ionicons with Ionic are great, but if you need something specific, have your own custom icons or anything that's not covered by the stand...
How to Show/Hide Elements Based on User Roles with Ionic When you build an authentication system for your app it's very likely that you also have some sort of role management. If you want to show or hide dif...