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

Question

I have the following code:







Ionic 4 - Menu






    
        
            
                Left Menu
            
        
        
            Hello World!
        
    
    

    
        
            Hello World
        
        
            Details

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();
 });
});



 
  
   
    Left Menu
   
  
  
   Hello World!
  
 
 

 
  
   Hello World
  
  
   Details

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!

user_2081043 · Answer

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


   
        
            Start Menu
        
    
    
        
            Menu Item
            Menu Item
            Menu Item
            Menu Item
            Menu Item

user_7260635 · Answer

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.


    
        
            Left Menu
        
    
    
        Hello World!
    



    

    
        
            Hello World
        
        
            Details

user_5796557 · Answer

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:

...

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

user_1242317 · Answer

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

user_5738675 · Answer

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:

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

user_6770741 · Answer

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

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

6 Answers