Show a ion-menu in ionic3 without routing and without gestures

Question

I'm trying to implement a side menu like the one shown in the ion-menu component page.

I just want to show the side menu programmatically, I don't mean to trigger navigation from it or have a burger button in the top bar. I use neither ion-router-outlet nor any other routing systems.

I tried copying and pasting the example on the page, but what I get is an error in console:

menu.js:292 Menu: must have a [content] element to listen for drag events on. Example:

<ion-menu [content]="content">

<ion-nav #content>

But this is not what I want. I don't mean to have any element to listen for drag events on and I don't want a ion-nav. I tried adding [swipeEnabled]="false" but it changed nothing.

How can I have a plain side menu without revolutionizing the architecture of my existing application?

Thank you

Answer 1

Your error comes from the following piece of Ionic's menu component: (see code - line 169)

const content = this.contentId !== undefined
  ? document.getElementById(this.contentId)
  : parent && parent.querySelector && parent.querySelector('[main]');

if (!content || !content.tagName) {
  // requires content element
  console.error('Menu: must have a "content" element to listen for drag events on.');
  return;
}

Ionic is looking for a contentId on your page. You can achieve this by wrapping a div around your content. And place a trigger somewhere to open or close the menu.

<ion-menu contentId="main-content">
  <!-- all menu items -->
</ion-menu>

<div id="main-content">
  <ion-content>
    <!-- rest of page -->
    <ion-button (click)="openMenu()">Open Menu</ion-button>
  </ion-content>
</div>

constructor(private menu: MenuController) { }

openMenu() {
  this.menu.toggle();
}