February 1, 2017

Ionic 2 Menus

❮❮ Previous
Next ❯❯

Ionic 2 Menus – Menu component enables us to create side-menus. Menu is basically side-menu which is displayed on button click or on drag out. Menus are displayed differently depending
upon the mode and this can be changed to any available menu types.
It is very simple to create side menu in Ionic 2.
Here in this tutorial we are going to explain how you can create side menus in ionic 2. You can also use our online editor to run the code online.

Ionic 2 Menus | Side Menus Example

Let us first create very basic menu-

Side Menu

You can create side menus simply as below-

Ionic 2 Menus Example:

<ion-header>
  <ion-navbar>
   <ion-nav id="nav" #content [root]="rootPage"></ion-nav>
    <button ion-button menuToggle icon-only>
      <ion-icon name='menu' ></ion-icon>
    </button>
    <ion-title>
      Tutorialsplane
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>
        IONIC
    </ion-item>
    <ion-item>
        PHP
    </ion-item>
    <ion-item>
        Bootstrap
    </ion-item>
    <ion-item>
        Materialize
    </ion-item>
    <ion-item>
        jQuery
    </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

Try it »

If you run the above example it will produce the output something like this-

Ionic 2 Menus : Side Menus

Menu Options

Following Options are available for the menu options.

Option Type Description
content any A reference to the content element the menu should use.
id string Menu id.
side string This is used assign the side where menu will be placed, there are basically two positions – “left” and “right” . Default is “left”.
type string You can set the menu type as – “overlay”, “reveal” or “push”.
enabled boolean This is used to enable/disable menus. Default is true.
swipeEnabled boolean This is used to enable/disable menus. Default is true.
persistent string Whether or not the menu should persist on child pages. Default is false.

Events

Following events are avilable-

Attribute Description
ionDrag When menu dragged open.
ionOpen When menu opened.
ionClose When menu closed.

Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯