Ionic 5 different menu on each page not working

Ionic Framework
1

Hi,

I want to have different menus on each of my pages, because each has specific functionalities. On the first page there’s a navigation to the second page and vice versa. When I navigate from page1 to page2 the menu of page2 is shown correctly. But when I navigate back to page1, the menu-button (the three lines) does not show up anymore on page1. I googled and read toturials but I haven’t found any advise to this problem.

Here’s the HTML-Code:

page1.html

<ion-menu side="end" menuId="menu1" contentId="content1">
  <ion-content>
    <ion-list>
      <ion-item routerLink="/page2">
        Page 2
      </ion-item>
      <ion-item>
        Do some stuff
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet id="content1"></ion-router-outlet>

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-menu-button menu="menu1"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
</ion-content>

page2.html

<ion-menu side="end" menuId="menu2" contentId="content2">
  <ion-content>
    <ion-list>
      <ion-item routerLink="/page1">
        Page 1
      </ion-item>
      <ion-item>
        Do some other stuff
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet id="content2"></ion-router-outlet>

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-menu-button menu="menu2"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
</ion-content>

Btw I wonder, why I do need an ion-router-outlet for menus.

2

This setup is really just not right.

  1. You should have one ion-router-outlet per app. Have multiple outlets in different pages like this is not something we want to support
  2. multiple menu’s perpage kind of defeats the point of a sidemenu. side menu’s should provide a whole app level context to any major page in an app.

I suggest using one top level menu and just providing separators for the different sections.

1 Like
3

Thanks for your answer. But having only one toplevel menu make no sense for me, because the actions available on each page are very distinct. The menu is not really for navigation.

May I define multiple menus as shown, having only one ion-root-outlet and switching the menu when the page is entered using the menuController. Would this work?

Or is there another kind of menu beside the sidemenu, e.g. a popup-menu?

4

because the actions available on each page are very distinct. The menu is not really for navigation.

Then a side menu might not be right for this use case. Something that is traditionally used for navigation should be used for a different context.

Or is there another kind of menu beside the sidemenu, e.g. a popup-menu?

We have docs that cover the components available.

5

Sidemenu is really great for filtering multiple data which will come from right side.

what i see you are putting menu code in each page

what you can do just put all menu in app.component.html

access menu with menuId as you are doing in page.

Try this and let me know if it works

6

Thanks. I put all my menus in app.component.html and on each page there’s a menu-button which calls a method to open the specific menu for this page. This works perfectly. There’re no extra router-outlets.

But there’s still one problem (maybe a little bit out of topic). How can I call page-specific methods from the menu which is located outside the page? As far as I know, I only can call methods of app.component.ts.

7

use behaviorSubject or Subject to communicate with cross component

Tut: https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject-8cc061f1cfc0

8

Hello, Can you provide the code as it seems to be operational ?
I tried to code an multi tab with a diffrent menu pet tab app, but still can’t get it to works properly… cant have menu 1 when I return from menu 2 (flow is : tab1 (menu 1 is ok) -> tab2 (menu 2 is ok) -> tab 1 (menu 1 is lost ) ) … @ionic version is 5.0.0 also …
I also tried to apply hints form this tuto but without success yet :
https://www.youtube.com/watch?v=4VYC725VMNA

my repo for this demo : https://github.com/pfouque06/tabmultisidemenu
thx for any help there
Philippe

Ps: found the solution : typo within ion-menu directive with attribute menuID instead of menuId !! leaving the code here if anyone needs it