Side Menu

Search…
Side Menu
Using side menu in this Ionic template
After you go through the authentication pages and you log in into the app, you will see that there are two ways to navigate into the app pages: using tabs and using the side menu. 
To learn more about the navigations we use in this ionic template go to the Navigation section.
To customize the side menu  go tosrc/app/app.component.html and src/app/app.component.ts
We use the ion-menu component from Ionic UI Components. You can either define the menu items in the markup or in the Component. 
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.ts
The 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!
​
Authentication
Profile
Last modified 1yr ago
Copy link