Nested Menus using Sidemenu Starter

Ionic Framework ionic-v3
1

I wonder if anyone has been able to implement a nested side menu in Ionic 2. As part of my learning process, I am attempting to build a three-level nested menu; something like:

menu-item 1
menu-item 2 -> sub-menu-item 1
menu-item 3 -> sub-menu-item 1 -> sub-sub-menu-item 1

I want to build this into my sidemenu and ensure that pages are pushed onto the stack to implement active item styles (like a book app with chapters).

Since the app.component.ts file controls the sidemenu using Nav and MenuController I attempted to create a function called ‘gotosubMenu’ that would push a sub menu onto the stack like so:

gotosubMenu () {
  this.nav.push(SubMenu1);
}

and then in app.html, create a menu item with a button that runs this function:

<button ion-item (click)="gotosubMenu()">

This does not work unfortunately. I have noticed if I repeat the same thing within a page however (SubMenu1 for example), the button will push correctly. I think this means that you cannot push from a Menu component. My next logical conclusion was to use the NavController component in my constructor and have this handle the push function but I now understand that it is not possible to implement a component within a component.

Are there any ways to use the sidemenu in this way, or is the only implementation through removing the Menu component and using Nav as a page by itself?

2

So I’ve been doing some more research into implementing this. It seems that there are quite a few examples of nested side menus using Ionic 1xx.

The main issue, I think, is that the side menu is called using the MenuController and not NavController and this is because the rootPage is always pushed to the top of the stack. So the sidemenu and rootPage exist at the same time with the sidemenu on top of the rootPage.

This has led me to understand that pushing to a new page containing the submenu buttons and closing the menu is not really an elegant solution (this is what I am doing right now). I need to be able to push the MenuController view to another MenuController view and I’m not quite sure how to do it…

3
4

Hi @ma843, thanks for the suggestion.

I had actually come across that thread previously. The main issue, of course, is that I don’t want a ‘dropdown’ sub-menu as I don’t think it is intuitive or good UI practise on mobile.

I want to implement something like this:

Another example:

But I want to do this by maintaining the nav stack and MenuController (I still want to setRoot to the page opened).