Ionic Side Menu
Learn how to use and customize a sid menu component in an Ionic angular app.
Ionic Menu
Navigation is indeed one of the most important elements of user experience. The Menu component is a navigation drawer that slides in from one side of the current view. In Ionic apps is very easy to add a Side Menu component.
By default, it slides in from the left, but the side can be overridden. This is important for RTL apps.
After you go through the authentication pages of the template and you log in into the app, you will see that there are two ways to navigate into the app pages:
- tabs
- side menu
You can find the code of this side menu in
src/app/app.component.html and src/app/app.component.tsWe use the ion-menu component from the Ionic UI Components. You can either define the menu items in the markup (.html) or in the component (.ts).
Let's see an example.
The following code defines the Forms section of the
ion-menu with two items. With the
[routerLink] you define the route where you want to navigate to when clicking the ion-item. Remember that those routes are defined in
src/app/app-routing.module.tsThe icons can be set either using Ionicons, like we do in the Form Filters option, or using custom svg icons. This template includes lots of custom and beautiful svg icons that you can use in your ionic apps.
app.component.html
1
<ion-list>
2
<ion-list-header>
3
<ion-label>Forms</ion-label>
4
</ion-list-header>
5
<ion-menu-toggle autoHide="false">
6
<ion-item [routerLink]="['/forms-and-validations']">
7
<ion-icon slot="start" src="./assets/custom-icons/side-menu/forms.svg"></ion-icon>
8
<ion-label>
9
Forms & Validations
10
</ion-label>
11
</ion-item>
12
<ion-item [routerLink]="['/forms-filters']">
13
<ion-icon slot="start" name="options-outline"></ion-icon>
14
<ion-label>
15
Filters
16
</ion-label>
17
</ion-item>
18
</ion-menu-toggle>
19
</ion-list>
Copied!
Also, other menu item options are defined as a list in the
AppComponent and iterated in the html. Let's see an example.app.component.ts
1
accountPages = [
2
{
3
title: 'Log In',
4
url: '/auth/login',
5
ionicIcon: 'log-in-outline'
6
},
7
{
8
title: 'Sign Up',
9
url: '/auth/signup',
10
ionicIcon: 'person-add-outline'
11
},
12
... // more pages
13
]
Copied!
app.component.html
1
<ion-list>
2
<ion-list-header>
3
<ion-label>Account</ion-label>
4
</ion-list-header>
5
<ion-menu-toggle autoHide="false" *ngFor="let p of accountPages; let i = index">
6
<ion-item [routerLink]="p.url">
7
<ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''" [src]="p.customIcon? p.customIcon: ''"></ion-icon>
8
<ion-label>
9
{{p.title}}
10
</ion-label>
11
</ion-item>
12
</ion-menu-toggle>
13
</ion-list>
Copied!
Last modified 5mo ago
Copy link