How can I turn Ionic's basic side menu into a side menu with dropdown submenus?
//html
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
<ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
js
export class AppComponent {
public open=0;
public appPages = [
{ title: 'Inbox', url: '/folder/inbox', icon: 'mail' },
{ title: 'Outbox', url: '/folder/outbox', icon: 'paper-plane' },
{ title: 'Favorites', url: '/folder/favorites', icon: 'heart' },
{ title: 'Archived', url: '/folder/archived', icon: 'archive' },
{ title: 'Trash', url: '/folder/trash', icon: 'trash' },
{ title: 'Spam', url: '/folder/spam', icon: 'warning',
subPages: [
{ title: 'subtest1', url: '' },
{ title: 'subtest2', url: '' },
{ title: 'subtest3', url: '' },
{ title: 'subtest4', url: '' },
{ title: 'subtest5', url: '' },
{ title: 'subtest6', url: '' },
{ title: 'subtest7', url: '' },
{ title: 'subtest8', url: '' }
]
},
];
public labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
constructor() {}
}
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index"> <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected"> <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"> {{ p.title }} Submenu Item 1 Item 2 Item 3
