How to Create Sidebar Navigation in Ionic 6 Angular App

Ionic side menu navigation tutorial; In this guide, you will find out how to add custom sidebar menu navigation in the Ionic angular application.

The side nav menu is commonly used on small screen devices, and it usually has a hamburger toggle icon. When clicked on the toggle button, the entire screen covers up with the overlay.

Ideally, a navigation screen slides into the view from left to right, in some cases right to the left, covers some portion of the screen, and displays some links that allow users to navigate throughout the app.

In this extensive example, you will get a chance to understand how to add a sidebar navigation menu in ionic from scratch, so let’s get started.

Ionic 6 Side Bar Menu Navigation Integration Example

  • Step 1: Set Up Ionic Environment
  • Step 2: Create New Pages
  • Step 3: Update Main App Routing Module
  • Step 4: Define Side Nav Child Routes
  • Step 5: Create Custom Side Nav in Ionic
  • Step 6: Add Toggle Button
  • Step 7: Run Ionic Application

Set Up Ionic Environment

First, you have to install an ionic command-line interface (CLI) tool globally on your development system.

npm install -g @ionic/cli

Evoke ionic, angular app installation process:

ionic start ionic-side-menu-app blank --type=angular

Enter into the app folder:

cd ionic-side-menu-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Create New Pages

We require some pages to enable the navigation in our app, so use the given below command to create About, Blog, Contact, and Side Nav pages.

Also, make sure to delete the Home page component from the application folder.

ionic generate page about
ionic generate page blog
ionic generate page contact
ionic generate page sidenav

Update Main App Routing Module

In this step, we will modify the main app routing module, remove all the routes and add only the SidenavPageModule route with the blank path.

We are making the SidenavPageModule the main routing module that can easily handle the sidebar menu navigation in ionic.

Update app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./sidenav/sidenav.module').then( m => m.SidenavPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Define Side Nav Child Routes

To define the nested route, you need to pass all the routes with path names inside the children array, the redirectTo=”” property indicates when the app initially loads, it will redirect to the blog page.

Update sidenav-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SidenavPage } from './sidenav.page';

const routes: Routes = [
  {
    path: 'nav',
    component: SidenavPage,
    children: [
      {
        path: 'about',
        loadChildren: () => import('../about/about.module').then(m => m.AboutPageModule)
      },
      {
        path: 'blog',
        loadChildren: () => import('../blog/blog.module').then(m => m.BlogPageModule)
      },
      {
        path: 'contact',
        loadChildren: () => import('../contact/contact.module').then(m => m.ContactPageModule)
      },
      {
        path: '',
        redirectTo: '/nav/about',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/nav/about',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

export class SidenavPageRoutingModule {}

Create Custom Side Nav in Ionic

Let us update the Sidenav page’s HTML template, add the ion-menu-toggle attribute bind it with the ngFor directive. This will display the routes on the sidebar menu drawer, and the routerLink represents the page url to be used for navigation.

Also, show icons using the ion-icon attribute; here, we added callback for iOS and Android icon support.

Update sidenav.page.html file:

<ion-app>
  <ion-menu contentId="main-content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Side Bar Nav</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let nav of NAV">
          <ion-item 
            routerDirection="root" 
             [routerLink]="nav.link" 
             [class.active-menu]="active === nav.link">
              {{nav.name}}
              <ion-icon slot="start" [ios]="nav.icon + '-outline'" [md]="nav.icon + '-sharp'"></ion-icon>              
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

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

</ion-app>

The NAV array holds the route information such as name, link, and icon name.

Update sidenav.page.ts file:

import { Component, OnInit } from '@angular/core';

import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.page.html',
  styleUrls: ['./sidenav.page.scss'],
})

export class SidenavPage implements OnInit {

  active = '';

  NAV = [
    {
      name: 'About',
      link: '/nav/about',
      icon: 'person-circle'
    },
    {
      name: 'Blog',
      link: '/nav/blog',
      icon: 'albums'
    },
    {
      name: 'Contact',
      link: '/nav/contact',
      icon: 'call'
    }
  ]

  constructor(private router: Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.active = event.url
    })
  }

  ngOnInit() { }

}

Add Hamburger Toggle Button

To display the sidebar menu toggle button, add the ion-menu-button attribute in every HTML template.

Update about.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>About</ion-title>

    <!-- Hamburger -->
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>

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

<ion-content>
    <!-- Content -->
</ion-content>

Add toggle button for sidebar menu in blog.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>Blog</ion-title>

    <!-- Hamburger -->
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>

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

<ion-content>
    <!-- Content -->
</ion-content>

Insert hamburger toggle button for sidebar menu in contact.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>Contact</ion-title>

    <!-- Hamburger -->
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>

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

<ion-content>
    <!-- Content -->
</ion-content>

Run Ionic Application

There are many ways to test the application; you may add an ionic lab package, use the ionic serve command, or run it on the virtual or actual device.

npm i @ionic/lab --save-dev

ionic serve -l

Even, you may use:

ionic serve

Slide Side Menu in Ionic

Plus, you may invoke the app on the virtual or real device by adding platform, creating build and starting on the device.

Conclusion

The Ionic side nav example is over; we think you have assimilated the entire tutorial and will surely be able to create or add slide side menu navigation in your ionic, angular application.