Adding ion-menu inside a page [Partially Solved]


I am trying to add an ion-menu inside a page like below. I would like to see that menu on the right.

<ion-navbar *navbar calm>
  <ion-title>Page Title</ion-title>
  <ion-buttons start>
    <button (click)="logout()"><ion-icon name="log-out"></ion-icon></button>

<ion-content #dashboardPage class="unitDetails">

I tried to add the ion-menu before the ion-navbar and within ion-navbar but none of them showed the hamburger icon. What am I missing?

Thanks in advance

I found my solution!

The [content] value from ion-menu has to go to ion-content and add a button to ion-navbar with a function that toggle the menu

Hi Icarus, can you please post an example of your final working code?


<ion-navbar *navbar calm>
  <ion-buttons end>
    <button (click)="toggleMenu()"><ion-icon name="menu"></ion-icon></button>

<ion-menu side="right" [content]="content">
<!--<ion-menu side="right" type="overlay" [content]="dashboard">-->
  <!-- Because there is not overlay, the toolbar is not shown -->
  <!-- For now, it helps to see the first item from the list -->
      <button ion-item (click)="toolMenuOpenPage(newPage)">

<ion-content #content>


  constructor(menuCtrl: MenuController) {
    this.menuCtrl = menuCtrl;
  toggleMenu() {

My solution is not perfect though.

Now, my issue is when I click an item from the ion-menu, the current page does not disappear for the new one. It is just grayed out.

I don’t want to set a new root, so I need to figure out what I need to do next to be able to push the new page and be able to come back.

If you find something, let me know

Thanks Icarus, I’ll let you know if I find a solution.