导航菜单 | Uniboot UI

为网站提供导航功能的菜单。

TIP

若要覆盖菜单默认高度，可使用如下样式：

css

.u-menu--horizontal {
  --u-menu-horizontal-height: 100px;
}

顶栏

顶栏菜单适用于多种场景。

默认垂直布局；将 mode 设为 horizontal 可切换为水平。可使用子菜单组件创建二级菜单。background-color、text-color、active-text-color 用于自定义颜色。

左右排列

可将菜单项靠左或靠右排列。

侧栏

带子菜单的垂直菜单。

使用 u-menu-item-group 创建分组；分组名由 title 属性或具名插槽决定。

Default colors

Custom colors

vue

<template>
  <u-row class="tac">
    <u-col :span="12">
      <h5 class="mb-2">Default colors</h5>
      <u-menu
        default-active="2"
        class="u-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <u-sub-menu index="1">
          <template #title>
            <u-icon><location /></u-icon>
            <span>Navigator One</span>
          </template>
          <u-menu-item-group title="Group One">
            <u-menu-item index="1-1">item one</u-menu-item>
            <u-menu-item index="1-2">item two</u-menu-item>
          </u-menu-item-group>
          <u-menu-item-group title="Group Two">
            <u-menu-item index="1-3">item three</u-menu-item>
          </u-menu-item-group>
          <u-sub-menu index="1-4">
            <template #title>item four</template>
            <u-menu-item index="1-4-1">item one</u-menu-item>
          </u-sub-menu>
        </u-sub-menu>
        <u-menu-item index="2">
          <u-icon><icon-menu /></u-icon>
          <span>Navigator Two</span>
        </u-menu-item>
        <u-menu-item index="3" disabled>
          <u-icon><document /></u-icon>
          <span>Navigator Three</span>
        </u-menu-item>
        <u-menu-item index="4">
          <u-icon><setting /></u-icon>
          <span>Navigator Four</span>
        </u-menu-item>
      </u-menu>
    </u-col>
    <u-col :span="12">
      <h5 class="mb-2">Custom colors</h5>
      <u-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="u-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <u-sub-menu index="1">
          <template #title>
            <u-icon><location /></u-icon>
            <span>Navigator One</span>
          </template>
          <u-menu-item-group title="Group One">
            <u-menu-item index="1-1">item one</u-menu-item>
            <u-menu-item index="1-2">item two</u-menu-item>
          </u-menu-item-group>
          <u-menu-item-group title="Group Two">
            <u-menu-item index="1-3">item three</u-menu-item>
          </u-menu-item-group>
          <u-sub-menu index="1-4">
            <template #title>item four</template>
            <u-menu-item index="1-4-1">item one</u-menu-item>
          </u-sub-menu>
        </u-sub-menu>
        <u-menu-item index="2">
          <u-icon><icon-menu /></u-icon>
          <span>Navigator Two</span>
        </u-menu-item>
        <u-menu-item index="3" disabled>
          <u-icon><document /></u-icon>
          <span>Navigator Three</span>
        </u-menu-item>
        <u-menu-item index="4">
          <u-icon><setting /></u-icon>
          <span>Navigator Four</span>
        </u-menu-item>
      </u-menu>
    </u-col>
  </u-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@uniboot/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

折叠

垂直菜单可折叠。

expandcollapse

弹出层偏移

子菜单的 popperOffset 会覆盖菜单的 popper-offset。

菜单 API

菜单属性

名称	说明	类型	默认值
mode	菜单模式	`enum`	vertical
collapse	是否折叠（仅垂直模式）	`boolean`	false
ellipsis	是否省略（仅水平模式）	`boolean`	true
ellipsis-icon	自定义省略图标（水平且 `ellipsis` 为 `true` 时）	`string` / `Component`	—
popper-offset	弹出层偏移（对所有子菜单生效）	`number`	6
default-active	初始激活菜单的 `index`	`string`	''
default-openeds	初始展开的子菜单 `index` 数组	`array`	[]
unique-opened	是否只允许一个子菜单展开	`boolean`	false
menu-trigger	子菜单触发方式，仅 `mode` 为 `horizontal` 时生效	`enum`	hover
router	是否启用 `vue-router`；为 `true` 时 `index` 作为 `path` 进行路由跳转，可配合 `default-active` 设置初始高亮	`boolean`	false
collapse-transition	是否启用折叠动画	`boolean`	true
popper-effect	折叠时文字提示主题，内置 `dark` / `light`	`enum` / `string`	dark
close-on-click-outside	点击菜单外部是否折叠菜单	`boolean`	false
popper-class	所有弹出菜单与标题提示的自定义类名	`string`	—
popper-style	所有弹出菜单与标题提示的自定义样式	`string` / `object`	—
show-timeout	所有菜单显示前延迟（毫秒）	`number`	300
hide-timeout	所有菜单隐藏前延迟（毫秒）	`number`	300
persistent	菜单失活且为 `false` 时销毁下拉	`boolean`	true

菜单事件

名称	说明	类型
select	激活菜单项时	`Function`
open	子菜单展开时	`Function`
close	子菜单收起时	`Function`

菜单插槽

名称	说明	子标签
default	自定义内容	SubMenu / Menu-Item / Menu-Item-Group

菜单暴露

名称	说明	类型
open	打开指定子菜单，参数为子菜单 `index`	`Function`
close	关闭指定子菜单，参数为子菜单 `index`	`Function`
handleResize	手动触发菜单宽度重算	`Function`
updateActiveIndex	设置当前激活菜单 `index`	`Function`

子菜单 API

子菜单属性

名称	说明	类型	默认值
index required	唯一标识	`string`	—
popper-class	弹出菜单自定义类名	`string`	—
popper-style	弹出菜单自定义样式	`string` / `object`	—
show-timeout	显示前延迟（默认继承菜单 `show-timeout`）	`number`	—
hide-timeout	隐藏前延迟（默认继承菜单 `hide-timeout`）	`number`	—
disabled	是否禁用	`boolean`	false
teleported	是否将弹出菜单传送到 `body`；一级子菜单默认 `true`，其余默认 `false`	`boolean`	undefined
popper-offset	弹出层偏移（覆盖菜单的 `popper-offset`）	`number`	—
expand-close-icon	菜单展开且子菜单关闭时的图标；需与 `expand-open-icon` 同时传入才生效	`string` / `Component`	—
expand-open-icon	菜单展开且子菜单打开时的图标；需与 `expand-close-icon` 同时传入才生效	`string` / `Component`	—
collapse-close-icon	菜单折叠且子菜单关闭时的图标；需与 `collapse-open-icon` 同时传入才生效	`string` / `Component`	—
collapse-open-icon	菜单折叠且子菜单打开时的图标；需与 `collapse-close-icon` 同时传入才生效	`string` / `Component`	—

子菜单插槽

名称	说明	子标签
default	自定义内容	SubMenu / Menu-Item / Menu-Item-Group
title	自定义标题	—

菜单项 API

菜单项属性

名称	说明	类型	默认值
index required	唯一标识	`string`	—
route	Vue Router 路由参数	`string` / `object`	—
disabled	是否禁用	`boolean`	false

菜单项事件

名称	说明	类型
click	点击菜单项时触发，参数为菜单项注册信息	`Function`

菜单项插槽

名称	说明
default	自定义内容
title	自定义标题

菜单项分组 API

菜单项分组属性

名称	说明	类型	默认值
title	分组标题	`string`	—

菜单项分组插槽

名称	说明	子标签
default	自定义内容	Menu-Item
title	自定义分组标题	—

类型声明

展开类型声明

/**
 * @param index 激活菜单索引
 * @param indexPath 激活菜单索引路径
 * @param item 选中的菜单项
 * @param routerResult 启用 `router` 时 `vue-router` 返回结果
 */
type MenuSelectEvent = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked,
  routerResult?: Promise<void | NavigationFailure>
) => void

/**
 * @param index 展开的子菜单索引
 * @param indexPath 展开的子菜单索引路径
 */
type MenuOpenEvent = (index: string, indexPath: string[]) => void

/**
 * @param index 收起的子菜单索引
 * @param indexPath 收起的子菜单索引路径
 */
type MenuCloseEvent = (index: string, indexPath: string[]) => void

interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}

interface MenuItemClicked {
  index: string
  indexPath: string[]
  route?: RouteLocationRaw
}

Dropdown 下拉菜单

Page Header 页头

Menu 导航菜单 ​

顶栏 ​

左右排列 ​

侧栏 ​

Default colors

Custom colors

折叠 ​

弹出层偏移 ​

菜单 API ​

菜单 属性 ​

菜单 事件 ​

菜单 插槽 ​

菜单 暴露 ​

子菜单 API ​

子菜单 属性 ​

子菜单 插槽 ​

菜单项 API ​

菜单项 属性 ​

菜单项 事件 ​

菜单项 插槽 ​

菜单项分组 API ​

菜单项分组 属性 ​

菜单项分组 插槽 ​

类型声明 ​

Menu 导航菜单

顶栏