Ionic4 component - Menu: must have a 'content' element to listen for drag events on

Question

I have the following code:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic 4 - Menu</title>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<script>
window.addEventListener('load', event => {
    document.querySelector('.button_details').addEventListener('click', (event) => {
        document.querySelector('.menu_main').toggle();
    });
});
</script>
</head>
<body>

    <ion-menu class="menu_main" side="start">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>

</body>

</html>

It works fine with one exception: when the page loads, there is the following error on the console:

Error: "Menu: must have a 'content' element to listen for drag events on."

Here you have the CodePen.io:

https://codepen.io/anon/pen/qJgEzZ/?editors=1011

And below you can try the code right here on StackOverflow:

window.addEventListener('load', event => {
 document.querySelector('.button_details').addEventListener('click', (event) => {
  document.querySelector('.menu_main').toggle();
 });
});

<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet"/>
 <ion-menu class="menu_main" side="start">
  <ion-header>
   <ion-toolbar color="secondary">
    <ion-title>Left Menu</ion-title>
   </ion-toolbar>
  </ion-header>
  <ion-content padding>
   Hello World!
  </ion-content>
 </ion-menu>
 <ion-menu-controller></ion-menu-controller>

 <ion-card style="display:inline-block;width:300px">
  <ion-card-header>
   <ion-card-title>Hello World</ion-card-title>
  </ion-card-header>
  <div style="padding:10px 10px;text-align:right;">
   <ion-button color="primary" class="button_details">Details</ion-button>
  </div>
 </ion-card>

Any idea on how to solve this problem? What is it missing here?

Could you please fork my CodePen.io with a proper code?

Thanks!

the error come from ion-menu-controller tag. if you don't want to use it, just remove this tag. — Mankeomorakort, Oct 26 '18 at 07:17
even if you remove that tag, the error persists. you can try it by yourself. — davidesp, Oct 26 '18 at 07:19

score 40 · Answer 1 · answered Nov 20 '19 at 11:49

Theion-menu needs a contentId and the ion-router-outlet needs an id, so the menu contentId must be the ion-router-outlet id:

<ion-menu side="start" contentId="menuContent">
   <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Start Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-router-outlet id="menuContent"></ion-router-outlet>

Thanks for the answer. Many tutorials out there are outdated and don't reflect this. — Vidal Quevedo, Dec 05 '19 at 03:28

score 22 · Answer 2 · edited Apr 13 '22 at 09:01

If you want the code:

Use content-id="content" and on ion-content id="content", where the id is the identifier of the ion-content of the main view that is calling the menu.

<ion-menu class="menu_main" side="start" content-id="content">
    <ion-header>
        <ion-toolbar color="secondary">
            <ion-title>Left Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content padding>
        Hello World!
    </ion-content>
</ion-menu>

<ion-menu-controller></ion-menu-controller>
    
<ion-content id="content">
    <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>
</ion-content>

score 9 · Answer 3 · answered Nov 19 '19 at 23:46

To those in the future you're probably running into the issue where you have a router outlet inside your ion-split-pane right?

Do this:

<ion-split-pane contentId="my-content">
     <ion-menu contentId="my-content"> ... </ion-menu>
     <ion-router-outlet id="my-content"></ion-router-outlet>
</ion-split-pane>

Note that the [main] attribute that was on your ion-router-outlet is now gone

Source: https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915

Thanks, this helped me, error messages not clear how to handle this situation — Thomas Gangsøy, Feb 12 '20 at 15:54

score 4 · Answer 4 · answered Oct 29 '18 at 10:35

If you don't require the swipe gesture to open the menu you can add the swipe-gesture="false" attribute to the ion-menu tag. IMO this should get rid of the error but doesn't at the moment. I've created an issue on GitHub. https://codepen.io/anon/pen/mzgRBj?editors=1011

If you want the swipe gesture to work you have to reference the content element's ID on the ion-menu element using the content-id attribute, see https://codepen.io/anon/pen/BqEpxE?editors=1011

score 1 · Answer 5 · answered Jan 07 '22 at 13:51

If you are using React and Ionic 6, the Ionic documentation is a bit outdated. I had to change the following items in order to menu appears:

Set autoHide={false} on IonMenuButton;
Set menu="start" on IonMenuButton (the value of menu property must be equal of IonMenu side property);

The code menu after adaptations:

  <IonMenu side="start" contentId="main-content">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Hello</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonList>
        <IonItem>Hello</IonItem>
      </IonList>
    </IonContent>
  </IonMenu>

  <div id="main-content">
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton autoHide={false} menu="start"></IonMenuButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
  </div>
</IonApp>

The original code from ion-menu documentation -> https://github.com/ionic-team/ionic-docs/blob/00c0885346e0f048bb2c2bda104ea26cd9d1ff52/static/demos/api/menu/index.html

score 0 · Answer 6 · edited Dec 16 '21 at 00:06

0

To Whom it may concern, this is what I did:

<ion-split-pane contentId="main">
    <ion-menu side="start" contentId="main">
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>Start Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item>LogOut</ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

edited Dec 16 '21 at 00:06

Tyler2P

2,324
26
22
31

answered Dec 29 '20 at 19:09

Ankit

45
2

1

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P Dec 29 '20 at 19:48
1

Adding contentId="main" works for me Thank you – Divek John Feb 16 '21 at 07:56
Without a description of what part of the example code you provided solves the problem, it is difficult to understand why it solves it. Even if the code is good, without explanation it's not a solution yet. – Peter Koller Sep 29 '21 at 11:26

Ionic4 component - Menu: must have a 'content' element to listen for drag events on

6 Answers6

Linked