Adding a Side Menu in Ionic 6


The Ionic CLI start command has a number of options for starter projects, even all the way back to Ionic 1.

You can see a list of them by using the following flag:

ionic start --list

One of these premade options is sidemenu:

ionic start myApp sidemenu

Now, that’s great, you start with a side menu implemented. But what if you choose another option like tabs or blank? How do we then properly add a side menu later on? (It is likely you will add a side menu later on.)


Enter <ion-menu>. The component is the building block that will allow us to create a side menu in our application.

But where should we put it?


The main app component files can be found in src/app of the project. Our app.component.html markup could look something like this, as you are probably using a router:

    <ion-router-outlet id="content"></ion-router-outlet>


It is important we set a couple properties on <ion-menu>. The most important is contentId. This needs to match up to the id of the main content. In our case, the router outlet is the main content.

    <ion-router-outlet id="content"></ion-router-outlet>
    <ion-menu contentId="content">

The second property is side. This informs Ionic as to which side the side menu should be, end or start. It will default to start.

Adding Menu Items

Let’s add some more markup - a header, a clickable item, etc.

<ion-router-outlet id="content"></ion-router-outlet>
<ion-menu side="start" menuId="first" contentId="content">
        <ion-item button (click)="logout()">
            <ion-icon name="exit-outline" slot="start"></ion-icon>

As you can see we have wrapped the <ion-item> in a <ion-menu-toggle>. This is so the menu will close upon clicking the item. This is nice, as we would have to figure out how to slide the menu back programmatically.


Adding a side menu in Ionic 6 (or any version for that matter) is pretty straight forward. There is a couple small details however that can cause confusion and lost time if ignored. But if we make sure we correctly set the contentId, and use <ion-menu-toggle> for our clickable items, we will be all set.

Erik August Johnson is a software developer working with JavaScript to build useful things. Follow them on Twitter.