Ion-tab-button not open the ion-menu

Ionic Framework
1

Hello. I want to create a bottom menu in an application, which is placed at the bottom, and the last point is a “more” menu item, which opens a side menu. But unfortunately it does not work. Ionic 8 angular 16standalone moduleless design. Here is the code:


html:
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home" routerLink="/home" routerDirection="root">
        <ion-icon name="home"></ion-icon>
        <ion-label>Főoldal</ion-label>
      </ion-tab-button>
    <ion-tab-button tab="products" routerLink="/products" routerDirection="root">
      <ion-icon name="cart"></ion-icon>
      <ion-label>Termékek</ion-label>
    </ion-tab-button>
      <ion-tab-button (click)="toggleMoreMenu()">
        <ion-icon name="menu"></ion-icon>
        <ion-label>Továbbiak</ion-label>
      </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

<ion-menu id="more-menu" type="overlay" side="end">
...
</ion-menu>


ts:
import { MenuController } from '@ionic/angular';

import {
...
  IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/angular/standalone';

@Component({
  selector: 'app-menu-bottom',
  templateUrl: './menu-bottom.component.html',
  standalone: true,
  imports: [IonIcon, IonTabButton, IonTabBar, IonTabs,
    ...
  ]
})
export class MenuBottomComponent {
  constructor(private menuController: MenuController) {
    ...
    this.menuController.enable(true, 'more-menu');
  }

  toggleMoreMenu() {
    this.menuController.toggle('more-menu');
  }

app component ts:
import { Component, OnInit } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { App } from '@capacitor/app';

import { MenuBottomComponent } from "./components/menu-bottom/menu-bottom.component";


@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: 'app.component.html',
  imports: [
    IonApp,
    IonRouterOutlet,
    IonContent,
    RouterModule,
    MenuBottomComponent,
]
})

export class AppComponent implements OnInit {
  ngOnInit() {
...
  }
}


app component html:
<ion-app>
  <ion-content id="main-content">
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
  <app-menu-bottom></app-menu-bottom>
</ion-app>

What causes it? I also tried ionSelect event, but it does not work either. Thanks in advance.

2

The problem is that <ion-menu> is defined outside of the app.component layout, so it’s not connected to the DOM structure.

<ion-menu> must be a direct child of <ion-app>, otherwise MenuController won’t find or open it.

First you need to update your app.component.html:

<ion-app>
  <ion-menu id="more-menu" type="overlay" side="end" contentId="main-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Továbbiak</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>

      <ion-list>
        <ion-item routerLink="/settings">Beállítások</ion-item>
        <ion-item routerLink="/about">Névjegy</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-content id="main-content">
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
  <app-menu-bottom></app-menu-bottom>

</ion-app>

Add the function to your button:

toggleMoreMenu() {
  this.menuController.toggle('more-menu');
}

I hope this fixes your issue. Cheers! :slightly_smiling_face:

3

Thank you for the response, finaly worked. But the probmel is the import. My app is standalone design, but I import the regular controller. :blush:

kép
kép627×268 20 KB

For the record:
When you use the standalone approach in Angular, you will ALWAYS need to import standalone components, and if there’s a mistake, you will ALWAYS have to check it.

haver a nice day, and thank you.