I’m working on an Ionic app and I stumbled upon this problem where the side menu does not close whenever I tap the menu item. It navigates to the page, but the menu stays open.

Ionic menu not closing

The solutions I found were either outdated or not pretty enough for my taste, so I came up this one:


// app.component.ts

this.platform.ready().then(async () => {
    // ...
    this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
          this.menuCtrl.close();
        }
    });
    //...
});

We’re listening for all the events emitted by the ionic router and close the menu whenever we receive a NavigationEnd event.

Update

You can also wrap your menu items with `ion-menu-toggle` like so:

<ion-list>
  <ion-menu-toggle>
    <ion-item routerLink="/tabs/store">
      <ion-icon name="home" slot="start"></ion-icon>
      <ion-label>Products</ion-label>
    </ion-item>
  </ion-menu-toggle>
  <ion-menu-toggle>
    <ion-item>
      <ion-icon name="person" slot="start"></ion-icon>
      <ion-label>Categories</ion-label>
    </ion-item>
  </ion-menu-toggle>
</ion-list>