How to Add A Side Menu to Your Ionic 4 App [v4]

In this Quick Win we will add a side menu to our Ionic 4 app starting from a blank template using the CLI to generate our pages and new Angular Router.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

Are you ready to start learning?

Join the Ionic Academy

In the documentation and official starter template the side menu is always set as the main UI at the top most level of your app but many times you will have a login screen or other screens in which you simply need to integrate the side menu.

Therefore we will go through building a side menu from a blank app so you could later include it anywhere inside your app!

Setting up the Side Menu Project & Routing

We start with a blank app and add all the needed pages for the side menu. Also, we need a new module file right next to our menu module where we can specify the routing information and keep it separate from the overall routing of the app.

Go ahead and run:

Just like with the tab bar interface we need to tell the Angular router to load our routing information for the menu, and therefore we change our app/app-routing.module.ts to:

If you have anything like a login before this page the path to the menu would change so you could navigate to it afterwards, but for now it’s our starting page yet not coupled too tightly to the overall app routing like within the starter.

Next thing we need is the actual routing information for the side menu. This will now look bit different from the original starter because we use a different outlet for the content pages of our side menu (so the pages that will be displayed, not the menu on the left).

Think of an outlet like a container in which you present information, and the Angular router tells where which informations is presented. If you take a look at the app/app.component.html you will find this:

This means the router will replace the outlet with the right page to display. The same thing now happens for the side menu, and by providing an outlet with the path the router will know where the page will be displayed. A bit abstract yet, but we’ll fill it with live soon.

First thing now is to change your menu routing to include the information so change your app/pages/menu/menu-routing.module.ts to:

We now have the MenuPage as a parent with two children that will be the pages of our app. Initially the redirectTo will be triggered and the navigation changes to /menu/(menucontent:first) which simply means:

  • /menu: Starting path, resolves to our parent component which will also contain the side menu template setup
  • (menucontent:first): Syntax for (outlet:path) and in our case results in showing the first page inside the menucontent outlet

All of this might seem more difficult than it actually is but I wanted to clarify those things upfront. It’s good to have the full understanding of what’s going on with your routing here!

To make use of all the routing we now need to include the information in the actual app/pages/menu/menu.module.ts like this:

Alright, it’s time to create the template!

Creating the Menu View Template

Our side menu consists of some entries in a list and the actual view (outlet). Additionally it’s a good idea to wrap everything inside the Ionic split pane which adapts to bigger screens (like tablets) and shows the menu right next to your content. Also, this template is a good starting page for a responsive website if you plan to deploy your Ionic app as such.

This means, the general structure would look like this:

To have some links inside our menu let’s create a little array of information that we can use. The items will each have their own path based on the routing we created in the previous section.

Additionally you want to indicate which page is active most of the time so we also subscribe to the Angular router to receive changes about our path which we can then use to add a class to our view items in the next step!

For now, open your pages/menu/menu.page.ts and change it to:

To mark the active page in the menu we also need a little CSS so add this to your pages/menu/menu.page.scss:

Now we can use our basic structure and fill it with live which means using the array to create some items. Let’s change the pages/menu/menu.page.html right now and then talk about what’s new:

Many new components and properties so let’s take a look at them more closely:

  • ion-menu-toggle: This button will automatically toggle the active menu. Normally the button is hidden when the menu is already visible (which makes sense in some places) but here we always want to show the buttons
  • [href]: This notation set’s the link for the button using the property of our ngFor loop variable
  • routerDirection: To animate the appearance of a page correctly we can use different directions, but here we always want to set it like it was the root page
  • ion-router-outlet: The menu is only the left (or right) part of the screen the you slide in, this outlet is the part where your actual page will be rendered. It’s a special Ionic component on top of the standard Angular router outlet which provides some more information on animation

In here we also finally find the outlet name menucontent that we have used within our routing before! And finally, to connect the menu accordingly with the outlet we need to set it to be the main outlet and the id content should match the contentId we have used on the ion-menu component.

So much information, give it a try and your menu should work on bigger screens already, but you won’t see a burger icon on small screens right now.

You would already be able to pull the menu in with a gesture but a button would still be nice.

Let’s change that.

Toggling the Side Menu

To get the icon which will toggle the menu we make use of the ion-menu-button that you would have to add on all of your pages where you want to toggle the menu. For now we will only add it to our pages/first/first.page.html like this:

Besides that we added some buttons to showcase some more functionality:

  • The plain ion-menu-toggle button inside the content will only be visible on small screens where the menu is hidden
  • The button with the click event will call the openMenu() function that we define soon which uses the Ionic MenuController
  • The last button will directly open a different page of our side menu using the path and routerDirection like a regular menu item

So you can always use the MenuController for interaction with the menu, and in our case the pages/first/first.page.ts would look like this:

Now your side menu is ready with clean routing and all the basic functions you need!

Conclusion

Just like the tab bar the side menu is not that easy using the new routing system. When you now add sub pages be careful where you add the routing information so always remember in which parent you display the information.

Besides that the routing provides a flexible way to display all information in a logical way!

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

Tweet
Reddit
+1
Share27
Email
27 Shares