Navigating with Style: Building a Toggle Side Menu with Ionic UI Components and Angular Routing (Part 7) in Angular-15 Ionic-7 App

Welcome back to my blog series on building an Angular-15 Ionic-7 app from scratch! In this seventh part, I'm going to show you how to create a toggle side menu using Ionic UI Components and Angular Routing. This is a very useful feature for any app that needs to provide easy access to different sections or settings. You'll learn how to use the Ionic Menu component, the Ionic List component, and the Angular Router to create a responsive and dynamic side menu that can be opened and closed with a swipe gesture or a button click. By the end of this post, you'll have a fully functional side menu that looks great on any device. Let's get started!

Since I already have a bottom navigation bar and I wanted to add some secondary features, I have created a side menu which appears from the right when user clicks on the hamburger menu icon at the top right. Also I have placed it at the top right because it is more accessible with a touch.

To begin, I referred to the Ionic UI component from ion-menu: API Framework Docs for Types of Menu Components (ionicframework.com) and began the writing the template code in app.component.html file since the side menu needs to available on all pages:

<ion-app>
  <ion-menu side="start" menuId="main-menu" contentId="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>GrangeMobile</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list lines="full">
        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/tab3">
            <ion-icon slot="start" name="people-circle-outline"></ion-icon>
            <ion-label>My Lecturers</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/list">
            <ion-icon slot="start" name="star-half-outline"></ion-icon>
            <ion-label>Achievements</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/notifications">
            <ion-icon slot="start" name="notifications-outline"></ion-icon>
            <ion-label>Notifications</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/search-students">
            <ion-icon slot="start" name="search"></ion-icon>
            <ion-label>Search Students</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/notepad">
            <ion-icon slot="start" name="receipt-outline"></ion-icon>
            <ion-label>Notepad</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/analytics">
            <ion-icon slot="start" name="analytics-outline"></ion-icon>
            <ion-label>Analytics</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/library">
            <ion-icon slot="start" name="library-outline"></ion-icon>
            <ion-label>Library</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle>
          <ion-item detail="true" button routerLink="/tabs/login">
            <ion-icon slot="start" name="log-in-outline"></ion-icon>
            <ion-label>Login/Register</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
    <ion-footer>
      <ion-list lines="none">
        <ion-item class="ion-margin" (click)="logout()">
          <ion-label>Logout</ion-label>
          <ion-icon slot="end" name="log-out-outline"></ion-icon>
        </ion-item>
        <ion-item class="ion-margin">
          <ion-toggle
            (ionChange)="onToggleColorTheme($event)"
            [enableOnOffLabels]="true"
            >Dark Mode</ion-toggle
          >
        </ion-item>
      </ion-list>

      <ion-toolbar>
        <ion-label class="ion-margin"> Karan Gupta | D22124440</ion-label>
      </ion-toolbar>
    </ion-footer>
  </ion-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>

The above code represents the app's main menu, which is accessed by clicking on a hamburger icon in the top left corner of the app. The menu contains a list of clickable items that navigate to different parts of the app.

The code starts with the <ion-app> tag, which is the root component of the Ionic app. Inside the <ion-app> tag, we have the <ion-menu> tag, which creates the main menu. The side, menuId, and contentId attributes define the position of the menu and the components that are affected by the menu.

Inside the <ion-menu> tag, there is an <ion-header> tag that contains an <ion-toolbar> tag with the app title. Below the header is the main content of the menu, defined by the <ion-content> tag.

The content consists of an <ion-list> tag that contains several <ion-menu-toggle> tags. Each ion-menu-toggle tag contains an <ion-item> tag that represents a menu item. Each menu item has an icon and a label, and clicking on it navigates to a specific page or section of the app.

At the bottom of the menu, there is an <ion-footer> tag containing a list of clickable items. The first item logs the user out of the app, and the second item toggles between dark and light mode.

Finally, the <ion-router-outlet> tag is where the main content of the app is rendered. It is identified by the id="main" attribute, which matches the contentId attribute in the <ion-menu> tag.

Next, I will add the hamburger menu on every page where I want to display it. For instance, let’s say I want it on the Modules page on tab1.page.html file, which I had created earlier, like this:

<ion-header [translucent]="false">
  <ion-toolbar>
    <ion-title> My Modules </ion-title>

    <ion-buttons slot="start">
      <ion-button routerLink="/tabs/notifications">
        <ion-icon slot="icon-only" name="notifications-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-buttons slot="end">
      <ion-menu-button menu="main-menu"></ion-menu-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" *ngIf="newModules">
 ...
</ion-content>

Once this template is set on both the app.component.html file and all html files of all pages, the side menu should appear from anywhere as demonstrated in Figures 21 and 22:

Figure 21: Main modules page with menu hamburger icon at the top right in header

Figure 22: Side menu appears from right on top of the modules page

Congratulations! You have successfully created a toggle side menu for your first Angular-15 Ionic-7 app. You have learned how to use Ionic UI components and Angular routing to create a responsive and user-friendly navigation system. You have also learned how to customize the appearance and behaviour of the side menu using CSS and TypeScript. 

You have taken a big step towards becoming a proficient Angular-15 Ionic-7 developer. I hope you enjoyed this tutorial and found it useful. 

If you want to learn more about Angular-15 Ionic-7 development, please bookmark my blog and follow me on LinkedIn. I will be posting more tutorials and tips on how to create amazing apps with Angular-15 Ionic-7 and other frameworks. 

Thank you for reading and happy coding!