Nested Menu in Ionic

Ionic Framework ionic-v3
2

Here’s a quick idea that might help you find a solution.

showSubmenu: boolean = false;

menuItemHandler(): void {
  this.showSubmenu = !this.showSubmenu;
}

<ion-list id="sidenav">
<!-- other menu items will go here -->
  <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item submenu-item *ngIf="showSubmenu">Sub menu item</ion-item>
  <ion-item submenu-item *ngIf="showSubmenu">Sub menu item</ion-item>
  <ion-item submenu-item *ngIf="showSubmenu">Sub menu item</ion-item>
<!-- other menu items will go here -->
</ion-list>

#sidenav {
  ion-item[submenu-item] {
    padding-left: 25px; // maybe margin-left would work better to move the border as well
    color: #ccc;
  }
}

This method wouldn’t have a smooth transition though, since you’re just manipulating the dom to do that. To get a smooth animation you might wanna do something like this instead:

<ion-list id="sidenav">
<!-- other menu items will go here -->
  <ion-item (click)="menuItemHandler()">Main Menu</ion-item>
  <ion-item-group submenu [class.visible]="showSubmenu">
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
    <ion-item submenu-item>Sub menu item</ion-item>
  </ion-item-group>
<!-- other menu items will go here -->
</ion-list>

#sidenav {
  ion-item-group[sidemenu] {
    overflow: hidden;
    display: block;
    height: 0;
    transition: height .3s linear;
    &.visible {
        height: 300px;
        // this is just sample value, calculate how much space you need for your menu items
    }
  }
}
2 Likes