ionic 4 adding side menu

Question

i started a project with tab template which i then later decided to add a side menu. the trouble is the side menu does not appear at all. here is my app.components.html looks like

<ion-app>
    <ion-split-pane>
        <ion-menu side="start">
            <ion-header translucent>
              <ion-toolbar color="secondary">
                <ion-title>Menu</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
          </ion-menu>
          <ion-router-outlet></ion-router-outlet>

        </ion-split-pane>
</ion-app>

actually after doing above my actual page comes for a brief second and shows a white page due to this.

in the console i see an error

sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.

but i already have content element.

score 49 · Accepted Answer · answered Dec 07 '18 at 14:51

49

Sirius2013 is correct, you will need to use the contentId attribute. See a working example below:

App.component.html

<ion-app>
  <ion-menu contentId="content1" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      menu stuff
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>

AnyPage.html

In the page you want to show your side menu, you can use the ion-menu-button tag.
See this example:

<ion-header>
  <ion-toolbar>
    <ion-title>Page Title</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Set the autoHide tag to false, so you will always see the menu button.

Docs: https://beta.ionicframework.com/docs/api/menu-button

answered Dec 07 '18 at 14:51

Tomas Vancoillie

3,463
2
29
45

1

@Tomas Vancoillie How do I add a new menu apart from the existing one ? – Bimal May 30 '19 at 10:23
2

what "id="content1" main " this means on router-outlet ? – Sherin Green Jun 18 '19 at 19:43
Ok, but what's the meaning of `contentId`? Why do I need it? The Ionic documentation just says "contentId: Description: The content's id the menu should use." and I'm just more confused than before – Christian Vincenzo Traina May 26 '20 at 17:21
@CristianTraìna The menu must have a "content" element to listen for drag events. `
...
` – Tomas Vancoillie May 26 '20 at 18:48
@TomasVancoillie could you please answer [my question](https://stackoverflow.com/questions/62028257/show-a-ion-menu-in-ionic3-without-routing-and-without-gestures)? I'll set a bounty on it when available – Christian Vincenzo Traina May 26 '20 at 21:20

score 5 · Answer 2 · answered Dec 06 '18 at 23:31

5

<ion-menu>
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

https://beta.ionicframework.com/docs/api/menu

Try to use contentId attribute.

answered Dec 06 '18 at 23:31

sirius2013

325
1
8

ionic 4 adding side menu

2 Answers2

Linked