---
url: /components/menu.md
---
# Menu 导航菜单

> 移动端：多级菜单压平为底部标签栏 + 返回栏，参见 [移动端 · 布局与导航壳](/mobile/layout)。

后台系统的垂直 / 水平导航：菜单项点击激活高亮，子菜单在垂直模式 inline 展开、水平或折叠模式弹层浮出，支持分组、折叠、唯一展开与 router 模式跳转。

## 基础用法

通过 `default-active` 指定默认激活项（对应 menu-item 的 index），`eb-sub-menu` 包裹二级菜单，`eb-menu-item-group` 为菜单项分区。

## 水平模式

`mode` 设为 'horizontal' 渲染为顶栏：菜单项横排，激活项底部高亮，子菜单 hover 弹层浮出。

## 折叠模式

垂直菜单设 `collapse` 收窄为 64px 图标栏，子菜单转为右侧弹层；折叠后菜单项仅展示图标，需自备图标（子菜单同理，建议用图标替代文字标题）。运行时切换 `collapse` 后子菜单弹层方向会同步切换（展开向下、折叠向右）。

## 唯一展开与默认展开

`unique-opened` 保证同时只展开一个子菜单，展开新项时自动收起已展开项；`default-openeds` 传入 index 数组指定初始展开的子菜单。

## router 模式与 select 事件

任意菜单项被点击都会触发根组件的 `select` 事件（参数为 index 与 indexPath 数组）；开启 `router` 后由注入的 router 执行跳转（菜单项 `route` 属性可覆盖跳转目标，缺省用 index）。本站未接入路由，点击仅演示事件回传。

## 点击触发的弹层子菜单

`menu-trigger` 控制弹层子菜单（水平模式或折叠态垂直模式）的打开方式，默认 'hover'，设为 'click' 后需点击标题才展开弹层。

## API