Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page

Was this helpful?

Ionic Side Menu

Learn how to use and customize a sid menu component in an Ionic angular app.

PreviousIonic AuthenticationNextIonic Profile

Last updated 3 years ago

Was this helpful?

Ionic Menu

. 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 insrc/app/app.component.html and src/app/app.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.ts

app.component.html
<ion-list>
  <ion-list-header>
    <ion-label>Forms</ion-label>
  </ion-list-header>
  <ion-menu-toggle autoHide="false">
    <ion-item [routerLink]="['/forms-and-validations']">
      <ion-icon slot="start" src="./assets/custom-icons/side-menu/forms.svg"></ion-icon>
      <ion-label>
        Forms & Validations
      </ion-label>
    </ion-item>
    <ion-item [routerLink]="['/forms-filters']">
      <ion-icon slot="start" name="options-outline"></ion-icon>
      <ion-label>
        Filters
      </ion-label>
    </ion-item>
  </ion-menu-toggle>
</ion-list>

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
accountPages = [
  {
     title: 'Log In',
     url: '/auth/login',
     ionicIcon: 'log-in-outline'
  },
  {
     title: 'Sign Up',
     url: '/auth/signup',
     ionicIcon: 'person-add-outline'
  },
  ... // more pages
]
app.component.html
<ion-list>
  <ion-list-header>
    <ion-label>Account</ion-label>
  </ion-list-header>
  <ion-menu-toggle autoHide="false" *ngFor="let p of accountPages; let i = index">
    <ion-item [routerLink]="p.url">
      <ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''" [src]="p.customIcon? p.customIcon: ''"></ion-icon>
      <ion-label>
        {{p.title}}
      </ion-label>
    </ion-item>
  </ion-menu-toggle>
</ion-list>

To learn more about the navigations used in this ionic template go to the .

We use the from the Ionic UI Components. You can either define the menu items in the markup (.html) or in the component (.ts).

The icons can be set either using , 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.

Navigation section
ion-menu component
Ionicons
Navigation is indeed one of the most important elements of user experience