NavMenu 导航菜单

为网站提供导航功能的菜单，支持顶栏、侧栏和折叠模式。

顶栏导航

水平顶栏导航，支持 logo 和右侧操作区。

vue

<my-nav-menu mode="horizontal" default-active="home">
  <template #logo><span>My UI</span></template>
  <my-nav-item index="home">首页</my-nav-item>
  <my-nav-item index="products">产品</my-nav-item>
  <my-nav-item index="services">服务</my-nav-item>
  <my-nav-item index="about">关于</my-nav-item>
  <template #actions>
    <button>登录</button>
    <button>注册</button>
  </template>
</my-nav-menu>

左右布局

通过 #logo 和 #actions 插槽实现左中右分区布局。

vue

<my-nav-menu mode="horizontal" default-active="overview">
  <template #logo><!-- 侧边栏图标 + 标题 --></template>
  <my-nav-item index="overview">概览</my-nav-item>
  <my-nav-item index="users">用户管理</my-nav-item>
  <my-nav-item index="settings">系统设置</my-nav-item>
  <template #actions><!-- 通知铃铛 + 用户头像 --></template>
</my-nav-menu>

侧栏导航

垂直侧栏模式，适合管理后台。

概览页面

vue

<my-nav-menu mode="vertical" default-active="overview" title="管理后台">
  <my-nav-item index="overview" icon="...">概览</my-nav-item>
  <my-nav-item index="users" icon="...">用户管理</my-nav-item>
  <my-nav-item index="orders" icon="...">订单</my-nav-item>
  <my-nav-item index="settings" icon="...">设置</my-nav-item>
</my-nav-menu>

折叠面板

垂直侧栏支持 collapsed 属性折叠为仅图标模式。

当前状态：已展开

vue

<my-nav-menu mode="vertical" v-model:collapsed="collapsed" default-active="overview" title="管理后台">
  <my-nav-item index="overview" icon="...">概览</my-nav-item>
  <my-nav-item index="users" icon="...">用户管理</my-nav-item>
  <my-nav-item index="orders" icon="...">订单</my-nav-item>
  <my-nav-item index="settings" icon="...">设置</my-nav-item>
</my-nav-menu>

带子菜单

使用 <my-nav-submenu> 实现二级菜单。

点击左侧子菜单查看选项

vue

<my-nav-menu mode="vertical" default-active="guide" title="文档">
  <my-nav-item index="guide" icon="...">快速开始</my-nav-item>
  <my-nav-submenu title="基础组件" icon="..." :offset="4">
    <my-nav-item index="button">Button 按钮</my-nav-item>
    <my-nav-item index="input">Input 输入框</my-nav-item>
    <my-nav-item index="select">Select 选择器</my-nav-item>
  </my-nav-submenu>
  <my-nav-submenu title="数据展示" icon="..." :offset="4">
    <my-nav-item index="table">Table 表格</my-nav-item>
    <my-nav-item index="card">Card 卡片</my-nav-item>
  </my-nav-submenu>
  <my-nav-item index="help" icon="...">帮助</my-nav-item>
</my-nav-menu>

弹出层偏移量

通过 offset 属性控制子菜单弹出时的位置偏移，用于调整弹出层与触发器的距离。

offset=0（紧贴触发器）

offset=8（常用间距，稍远离）

offset="[6, 12]"（同时偏移X和Y）

vue

<my-nav-submenu title="产品" :offset="8">
  <my-nav-item index="a">选项一</my-nav-item>
  <my-nav-item index="b">选项二</my-nav-item>
</my-nav-submenu>

<!-- 双向偏移 X=6px, Y=10px -->
<my-nav-submenu title="产品" :offset="[6, 10]">
  <my-nav-item index="a">选项一</my-nav-item>
</my-nav-submenu>

顶栏子菜单

水平顶栏也支持子菜单下拉。

vue

<my-nav-menu mode="horizontal">
  <template #logo>Brand</template>
  <my-nav-item index="home">首页</my-nav-item>
  <my-nav-submenu title="产品服务">
    <my-nav-item index="saas">SaaS 平台</my-nav-item>
    <my-nav-item index="api">API 服务</my-nav-item>
    <my-nav-item index="enterprise">企业版</my-nav-item>
  </my-nav-submenu>
  <my-nav-submenu title="资源中心" :offset="[0, 6]">
    <my-nav-item index="docs">帮助文档</my-nav-item>
    <my-nav-item index="blog">博客文章</my-nav-item>
  </my-nav-submenu>
  <my-nav-item index="pricing">定价</my-nav-item>
</my-nav-menu>

禁用项

vue

<my-nav-item index="b" disabled>禁用项</my-nav-item>

组件结构

<nav> 根元素在水平模式下包含 logo 插槽、菜单主体（my-nav-menu__body，含 <my-nav-item> 和 <my-nav-submenu> 子组件）和 actions 插槽；垂直模式下包含 header（标题 + 折叠按钮）和菜单主体。子菜单通过悬浮或点击展开弹出面板。

CSS 类名

类名	说明
`.my-nav-menu`	根元素
`.my-nav-menu--horizontal`	顶栏模式
`.my-nav-menu--vertical`	侧栏模式
`.is-collapsed`	折叠状态（侧栏）
`.my-nav-menu__logo`	Logo 区域（顶栏）
`.my-nav-menu__header`	侧栏头部
`.my-nav-menu__title`	侧栏标题
`.my-nav-menu__collapse-btn`	折叠按钮
`.my-nav-menu__body`	菜单主体
`.my-nav-menu__actions`	右侧操作区（顶栏）
`.my-nav-item`	菜单项
`.is-active`	激活状态
`.is-disabled`	禁用状态
`.my-nav-item__icon`	菜单项图标
`.my-nav-item__label`	菜单项文字
`.my-nav-submenu`	子菜单容器
`.is-open`	展开状态
`.my-nav-submenu__title`	子菜单标题
`.my-nav-submenu__arrow`	箭头图标
`.my-nav-submenu__popup`	弹出面板
`.-fade-*`	弹出面板过渡动画

API

NavMenu Props

属性	说明	类型	默认值
mode	菜单模式	`'horizontal' \| 'vertical'`	`'horizontal'`
collapsed	折叠状态（v-model，仅 vertical）	`boolean`	`false`
defaultActive	默认激活的菜单项 index	`string`	—
backgroundColor	背景色	`string`	`--my-bg-color`
textColor	文字颜色	`string`	`--my-color-text-primary`
activeTextColor	激活项文字颜色	`string`	`--my-color-text-primary`
width	展开宽度（仅 vertical）	`string`	`'240px'`
collapseWidth	折叠宽度（仅 vertical）	`string`	`'64px'`
title	侧栏标题	`string`	—

NavMenu Events

事件	说明	回调
update:collapsed	折叠状态变更	`(collapsed: boolean)`
select	菜单项选中	`(index: string)`

NavMenu Slots

名称	说明	作用域
default	菜单项	—
logo	顶栏左侧 logo 区域（horizontal）	—
actions	顶栏右侧操作区（horizontal）	—
header	侧栏头部（vertical）	`{ collapsed }`

NavItem Props

属性	说明	类型	默认值
index	唯一标识（必填）	`string`	—
disabled	禁用	`boolean`	`false`
icon	SVG 图标字符串	`string`	—
to	链接地址（渲染为 `<a>`）	`string`	—

NavItem Events

事件	说明	回调
click	点击事件	`(index: string)`

NavItem Slots

名称	说明
default	菜单项文本
icon	图标

NavSubmenu Props

属性	说明	类型	默认值
title	子菜单标题	`string`	—
icon	SVG 图标字符串	`string`	—
disabled	禁用	`boolean`	`false`
offset	弹出层偏移量	`number \| [number, number]`	—

NavSubmenu Slots

名称	说明
default	子菜单项
title	标题内容
icon	图标

NavMenu 导航菜单 ​

顶栏导航 ​

左右布局 ​

侧栏导航 ​

折叠面板 ​

带子菜单 ​

弹出层偏移量 ​

顶栏子菜单 ​

禁用项 ​

组件结构 ​

CSS 类名 ​

API ​

NavMenu Props ​

NavMenu Events ​

NavMenu Slots ​

NavItem Props ​

NavItem Events ​

NavItem Slots ​

NavSubmenu Props ​

NavSubmenu Slots ​