Menu 导航菜单
用于网站顶部或侧边的导航栏，支持 mode: 'horizontal' | 'vertical' 布局、多级嵌套 SubMenu 折叠动画以及与 vue-router 联动路由跳转。
预览
- 首页
- 管理面板
- 用户管理
- 系统设置
- 关于我们
- 禁用项目
安装
pnpm dlx brutx-vue@latest add menu用法
垂直模式
<script setup>
import { ref } from 'vue'
import { Menu, MenuItem, SubMenu } from 'brutx-ui-vue'
const active = ref('1')
</script>
<template>
<Menu default-active="1" mode="vertical" @select="idx => active = idx">
<MenuItem index="1">首页</MenuItem>
<SubMenu index="sub-admin" title="管理面板">
<MenuItem index="admin-users">用户管理</MenuItem>
<MenuItem index="admin-settings">系统设置</MenuItem>
</SubMenu>
<MenuItem index="3" disabled>禁用项目</MenuItem>
</Menu>
</template>水平模式
设置 mode="horizontal" 可以调整菜单布局为水平横排。在此模式下，嵌套的 SubMenu 会以悬浮框（绝对定位）的形式显示。
指针进入或离开子菜单时，展开与收起使用短暂延迟；快速移回会取消待处理的收起动作。按 Escape、选择菜单项、点击外部、禁用或卸载时会清理待处理的悬停动作。
<script setup>
import { ref } from 'vue'
import { Menu, MenuItem, SubMenu } from 'brutx-ui-vue'
const active = ref('home')
</script>
<template>
<Menu default-active="home" mode="horizontal" @select="idx => active = idx">
<MenuItem index="home">首页</MenuItem>
<SubMenu index="products" title="产品中心">
<MenuItem index="product-1">云服务器</MenuItem>
<MenuItem index="product-2">数据库</MenuItem>
</SubMenu>
<MenuItem index="about">关于我们</MenuItem>
</Menu>
</template>路由联动
设置 router 属性为 true 后，点击 MenuItem 会自动利用 Vue Router 进行路由跳转。绑定的目标可以是 route 属性，如果没有指定，则默认使用菜单项的 index 作为路径。
<template>
<Menu router default-active="/home" mode="vertical">
<MenuItem index="/home">首页</MenuItem>
<MenuItem index="/users" :route="{ name: 'UsersList' }">用户中心</MenuItem>
<MenuItem index="/settings">系统设置</MenuItem>
</Menu>
</template>子组件
| 组件 | 说明 |
|---|---|
Menu | 菜单根组件，提供上下文状态 |
MenuItem | 菜单项组件 |
SubMenu | 子菜单组件，用于嵌套及折叠内容 |
API 参考
Menu
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | "vertical" | "horizontal" | undefined | "vertical" | 设置菜单项的排列方向，可选水平或垂直。 |
详情声明类型"vertical" | "horizontal" | undefined 字面量
默认值详情
来源packages/ui/src/components/menu/Menu.vue | |||
defaultActive | string | undefined | "" | 设置初始高亮菜单项的 index；该值也用于初始化当前激活项。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/menu/Menu.vue | |||
router | boolean | undefined | false | 启用后，带 route 的菜单项会通过 vue-router 进行导航。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/menu/Menu.vue | |||
class | string | undefined | undefined | 追加到菜单根元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/menu/Menu.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@select | [index: string] | 菜单项被选中时发出其 index。 |
详情声明类型[index: string] 来源packages/ui/src/components/menu/Menu.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 菜单内容，通常包含 MenuItem 和 SubMenu。 |
详情声明类型{}来源packages/ui/src/components/menu/Menu.vue | ||
MenuItem
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
index必填 | string | — | 菜单项唯一标识，用于激活状态和 select 事件；路由模式下也用于匹配当前路由。 |
详情 | |||
disabled | boolean | undefined | false | 禁用该菜单项的选择和导航交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/menu/MenuItem.vue | |||
route | string | Record<string, unknown> | undefined | undefined | 路由模式下点击此项要导航到的路径或路由对象。 |
详情声明类型string | Record<string, unknown> | undefined 默认值详情
来源packages/ui/src/components/menu/MenuItem.vue | |||
inset | boolean | undefined | false | 缩进菜单项内容，使其与含图标的项对齐。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/menu/MenuItem.vue | |||
class | string | undefined | undefined | 追加到菜单项根元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/menu/MenuItem.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 菜单项的标签内容，可包含图标。 |
详情声明类型{}来源packages/ui/src/components/menu/MenuItem.vue | ||
SubMenu
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
index必填 | string | — | 子菜单唯一标识，用于菜单状态和嵌套层级标识。 |
详情 | |||
title | string | undefined | "" | 子菜单触发器标题；提供 title 插槽时由插槽内容呈现。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/menu/SubMenu.vue | |||
disabled | boolean | undefined | false | 禁用子菜单触发器，阻止展开交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/menu/SubMenu.vue | |||
inset | boolean | undefined | false | 缩进子菜单触发器内容，使其与含图标的菜单项对齐。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/menu/SubMenu.vue | |||
class | string | undefined | undefined | 追加到子菜单根容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/menu/SubMenu.vue | |||
triggerClass | string | undefined | undefined | 追加到子菜单标题触发器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/menu/SubMenu.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#title | {} | 自定义子菜单触发器内容；提供时优先于 title 属性。 |
详情声明类型{}来源packages/ui/src/components/menu/SubMenu.vue | ||
#default | {} | 子菜单内容，可包含 MenuItem 或继续嵌套 SubMenu。 |
详情声明类型{}来源packages/ui/src/components/menu/SubMenu.vue | ||
可访问性
- 键盘操作：支持使用
Enter或Space键激活MenuItem或展开/收起SubMenu。 - ARIA 属性：根组件自动设置
role="menubar"，各菜单项使用role="menuitem"。子菜单触发器自动管理aria-haspopup="true"和aria-expanded属性。 - 动效降级：垂直模式下的折叠动画支持
prefers-reduced-motion自动降级（如适用）。