ionic 侧栏菜单

Ionic 侧边栏菜单（也叫 Side Menu 或 Drawer）在 2025 年仍然是 Ionic 最常用的布局组件之一。下面给出 Ionic 7/8（最新版）在 Angular、React、Vue 三种框架下的完整实现方式和常见高级用法。

1. Ionic 最新官方推荐写法（2025 年）

Angular（最常用）

<!-- app.component.html -->
<ion-app>
  <ion-menu contentId="main-content" type="overlay">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>菜单</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="true">
          <ion-item routerLink="/home" routerDirection="root">
            <ion-icon name="home-outline" slot="start"></ion-icon>
            <ion-label>首页</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle auto-hide="true">
          <ion-item routerLink="/profile">
            <ion-icon name="person-outline" slot="start"></ion-icon>
            <ion-label>个人中心</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle auto-hide="true">
          <ion-item (click)="logout()">
            <ion-icon name="log-out-outline" slot="start"></ion-icon>
            <ion-label>退出登录</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- 主内容区域 -->
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>

在页面中打开/关闭菜单：

<!-- 任意页面，如 tabs.page.html 或 home.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-title>首页</ion-title>
  </ion-toolbar>
</ion-header>

React（Ionic 7+）

// App.tsx
import { IonApp, IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonIcon, IonLabel, IonMenuToggle, IonRouterOutlet, IonButtons, IonMenuButton } from '@ionic/react';
import { home, person, logOut } from 'ionicons/icons';

const App: React.FC = () => (
  <IonApp>
    <IonMenu contentId="main">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>菜单</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonMenuToggle>
            <IonItem routerLink="/home" routerDirection="root">
              <IonIcon icon={home} slot="start" />
              <IonLabel>首页</IonLabel>
            </IonItem>
          </IonMenuToggle>
          {/* 其他菜单项... */}
        </IonList>
      </IonContent>
    </IonMenu>

    <IonRouterOutlet id="main" />
  </IonApp>
);

页面中使用：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button />
    </ion-buttons>
    <ion-title>我的页面</ion-title>
  </ion-toolbar>
</ion-header>

Vue 3（Composition API）

<!-- App.vue -->
<template>
  <ion-app>
    <ion-menu content-id="main-content">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>菜单</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle :auto-hide="true">
            <ion-item router-link="/home">
              <ion-icon :icon="homeOutline" slot="start"></ion-icon>
              <ion-label>首页</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <!-- 更多项 -->
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet id="main-content" />
  </ion-app>
</template>

2. 常用属性配置（2025 年最全）

<ion-menu
  side="start"              <!-- start（左） | end（右） -->
  type="overlay"            <!-- overlay（覆盖） | push | reveal -->
  menuId="main-menu"        <!-- 可多个菜单时区分 -->
  contentId="main-content"  <!-- 对应 ion-router-outlet 的 id -->
  :swipe-gesture="true"     <!-- 是否允许手势滑动打开（默认 true）-->
>

3. 程序化打开/关闭菜单（非常常用）

Angular

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

constructor(private menu: MenuController) {}

openMenu() {
  this.menu.open('main-menu');      // 可传 menuId
}

closeMenu() {
  this.menu.close();
}

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

React

import { menuController } from '@ionic/react';

const open = () => menuController.open();
const close = () => menuController.close();
const toggle = () => menuController.toggle();

Vue

import { menuController } from '@ionic/vue';

const openMenu = () => menuController.open();

4. 常见高级需求

登录后才显示侧边栏

// Angular 示例
this.menu.enable(true);   // 启用
this.menu.enable(false);  // 禁用（登录页隐藏菜单）

多个侧边栏（左菜单 + 右菜单）

<ion-menu side="start"  menuId="left"  contentId="main"></ion-menu>
<ion-menu side="end"    menuId="right" contentId="main"></ion-menu>

<!-- 页面中分别使用 -->
<ion-buttons slot="start">
  <ion-menu-button menu="left"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
  <ion-menu-button menu="right"></ion-menu-button>
</ion-buttons>

侧边栏宽度自定义

ion-menu {
  --width: 300px;   /* 默认 304px */
  --max-width: 80%; /* 移动端最大宽度 */
}

暗黑模式自动适配

ion-menu {
  --background: var(--ion-background-color);
  --color: var(--ion-text-color);
}

5. 2025 年最推荐的完整全局样式（global.scss）

ion-menu {
  --width: 280px;

  ion-list {
    padding: 20px 0;
    background: transparent;
  }

  ion-item {
    --padding-start: 20px;
    --inner-padding-end: 20px;
  }
}

只要把上面的代码复制进你的项目，侧边栏菜单就能完美运行、好看、丝滑。

有特殊需求（如头像 + 用户信息头部、嵌套子菜单、结合 Redux/Vuex 控制显示等），随时告诉我，我给你完整模板！