Menu 导航菜单
为页面和功能提供导航的菜单列表。
何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
更多布局和导航的使用可以参考：通用布局。
顶部导航
水平的顶部导航菜单。
vue
<template>
<g-menu v-model:selectedKeys="current" mode="horizontal">
<g-menu-item key="mail">
<template #icon>
<g-icon type="mail" />
</template>
Navigation One
</g-menu-item>
<g-menu-item key="app" disabled>
<template #icon>
<g-icon type="appstore" />
</template>
Navigation Two
</g-menu-item>
<g-sub-menu key="SubMenu">
<template #title>
<span>
<g-icon type="setting" />
Navigation Three - Submenu
</span>
</template>
<g-menu-item-group title="Item 1">
<g-menu-item key="setting:1">Option 1</g-menu-item>
<g-menu-item key="setting:2">Option 2</g-menu-item>
</g-menu-item-group>
<g-menu-item-group title="Item 2">
<g-menu-item key="setting:3">Option 3</g-menu-item>
<g-menu-item key="setting:4">Option 4</g-menu-item>
</g-menu-item-group>
</g-sub-menu>
<g-menu-item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</g-menu-item>
</g-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const current = ref(['mail'])
return {
current
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
内嵌菜单
垂直菜单，子菜单内嵌在菜单区域。
vue
<template>
<g-menu
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
style="width: 256px;"
>
<g-menu-item key="1">
<template #icon>
<g-icon type="pie-chart" />
</template>
<span>Option 1</span>
</g-menu-item>
<g-menu-item key="2">
<template #icon>
<g-icon type="desktop" />
</template>
<span>Option 2</span>
</g-menu-item>
<g-menu-item key="3">
<template #icon>
<g-icon type="inbox" />
</template>
<span>Option 3</span>
</g-menu-item>
<g-sub-menu key="sub1">
<template #title>
<span>
<g-icon type="mail" />
<span>Navigation One</span>
</span>
</template>
<g-menu-item key="5">Option 5</g-menu-item>
<g-menu-item key="6">Option 6</g-menu-item>
<g-menu-item key="7">Option 7</g-menu-item>
<g-menu-item key="8">Option 8</g-menu-item>
</g-sub-menu>
<g-sub-menu key="sub2">
<template #title>
<span>
<g-icon type="appstore" />
<span>Navigation Two</span>
</span>
</template>
<g-menu-item key="9">Option 9</g-menu-item>
<g-menu-item key="10">Option 10</g-menu-item>
<g-sub-menu key="sub3" title="Submenu">
<g-menu-item key="11">Option 11</g-menu-item>
<g-menu-item key="12">Option 12</g-menu-item>
</g-sub-menu>
</g-sub-menu>
</g-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const collapsed = ref(false)
const selectedKeys = ref(['1'])
const openKeys = ref(['sub1'])
return {
collapsed,
selectedKeys,
openKeys
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
缩起内嵌菜单
内嵌菜单可以被缩起/展开。
你可以在 Layout 里查看侧边布局结合的完整示例。
vue
<template>
<div style="width: 256px;">
<g-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px;">
<g-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
</g-button>
<g-menu
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
>
<g-menu-item key="1">
<template #icon>
<g-icon type="pie-chart" />
</template>
<span>Option 1</span>
</g-menu-item>
<g-menu-item key="2">
<template #icon>
<g-icon type="desktop" />
</template>
<span>Option 2</span>
</g-menu-item>
<g-menu-item key="3">
<template #icon>
<g-icon type="inbox" />
</template>
<span>Option 3</span>
</g-menu-item>
<g-sub-menu key="sub1">
<template #title>
<span>
<g-icon type="mail" />
<span>Navigation One</span>
</span>
</template>
<g-menu-item key="5">Option 5</g-menu-item>
<g-menu-item key="6">Option 6</g-menu-item>
<g-menu-item key="7">Option 7</g-menu-item>
<g-menu-item key="8">Option 8</g-menu-item>
</g-sub-menu>
<g-sub-menu key="sub2">
<template #title>
<span>
<g-icon type="appstore" />
<span>Navigation Two</span>
</span>
</template>
<g-menu-item key="9">Option 9</g-menu-item>
<g-menu-item key="10">Option 10</g-menu-item>
<g-sub-menu key="sub3" title="Submenu">
<g-menu-item key="11">Option 11</g-menu-item>
<g-menu-item key="12">Option 12</g-menu-item>
</g-sub-menu>
</g-sub-menu>
</g-menu>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const collapsed = ref(false)
const selectedKeys = ref(['1'])
const openKeys = ref(['sub1'])
const toggleCollapsed = () => {
collapsed.value = !collapsed.value
}
return {
collapsed,
selectedKeys,
openKeys,
toggleCollapsed
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
只展开当前父级菜单
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
vue
<template>
<g-menu
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
mode="inline"
style="width: 256px;"
@openChange="onOpenChange"
>
<g-sub-menu key="sub1">
<template #title>
<span>
<g-icon type="mail" />
<span>Navigation One</span>
</span>
</template>
<g-menu-item key="1">Option 1</g-menu-item>
<g-menu-item key="2">Option 2</g-menu-item>
<g-menu-item key="3">Option 3</g-menu-item>
<g-menu-item key="4">Option 4</g-menu-item>
</g-sub-menu>
<g-sub-menu key="sub2">
<template #title>
<span>
<g-icon type="appstore" />
<span>Navigation Two</span>
</span>
</template>
<g-menu-item key="5">Option 5</g-menu-item>
<g-menu-item key="6">Option 6</g-menu-item>
<g-sub-menu key="sub3" title="Submenu">
<g-menu-item key="7">Option 7</g-menu-item>
<g-menu-item key="8">Option 8</g-menu-item>
</g-sub-menu>
</g-sub-menu>
<g-sub-menu key="sub4">
<template #title>
<span>
<g-icon type="setting" />
<span>Navigation Three</span>
</span>
</template>
<g-menu-item key="9">Option 9</g-menu-item>
<g-menu-item key="10">Option 10</g-menu-item>
<g-menu-item key="11">Option 11</g-menu-item>
<g-menu-item key="12">Option 12</g-menu-item>
</g-sub-menu>
</g-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selectedKeys = ref(['1'])
const openKeys = ref(['sub1'])
const rootSubmenuKeys = ['sub1', 'sub2', 'sub4']
const onOpenChange = (keys) => {
const latestOpenKey = keys.find(key => openKeys.value.indexOf(key) === -1)
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
openKeys.value = keys
} else {
openKeys.value = latestOpenKey ? [latestOpenKey] : []
}
}
return {
selectedKeys,
openKeys,
onOpenChange
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
垂直菜单
子菜单是弹出的形式。
vue
<template>
<g-menu
v-model:selectedKeys="selectedKeys"
mode="vertical"
style="width: 256px;"
>
<g-menu-item key="1">
<template #icon>
<g-icon type="pie-chart" />
</template>
Option 1
</g-menu-item>
<g-menu-item key="2">
<template #icon>
<g-icon type="desktop" />
</template>
Option 2
</g-menu-item>
<g-menu-item key="3">
<template #icon>
<g-icon type="inbox" />
</template>
Option 3
</g-menu-item>
<g-sub-menu key="sub1">
<template #title>
<span>
<g-icon type="mail" />
<span>Navigation One</span>
</span>
</template>
<g-menu-item-group title="Item 1">
<g-menu-item key="5">Option 5</g-menu-item>
<g-menu-item key="6">Option 6</g-menu-item>
</g-menu-item-group>
<g-menu-item-group title="Item 2">
<g-menu-item key="7">Option 7</g-menu-item>
<g-menu-item key="8">Option 8</g-menu-item>
</g-menu-item-group>
</g-sub-menu>
<g-sub-menu key="sub2">
<template #title>
<span>
<g-icon type="appstore" />
<span>Navigation Two</span>
</span>
</template>
<g-menu-item key="9">Option 9</g-menu-item>
<g-menu-item key="10">Option 10</g-menu-item>
<g-sub-menu key="sub3" title="Submenu">
<g-menu-item key="11">Option 11</g-menu-item>
<g-menu-item key="12">Option 12</g-menu-item>
</g-sub-menu>
</g-sub-menu>
</g-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const selectedKeys = ref(['1'])
return {
selectedKeys
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
主题
内建了两套主题 light|dark，默认 light。
vue
<template>
<div>
<g-switch
v-model:checked="theme"
checked-children="Dark"
un-checked-children="Light"
/>
<br />
<br />
<g-menu
v-model:selectedKeys="current"
:theme="theme ? 'dark' : 'light'"
mode="horizontal"
>
<g-menu-item key="mail">
<template #icon>
<g-icon type="mail" />
</template>
Navigation One
</g-menu-item>
<g-menu-item key="app" disabled>
<template #icon>
<g-icon type="appstore" />
</template>
Navigation Two
</g-menu-item>
<g-sub-menu key="SubMenu">
<template #title>
<span>
<g-icon type="setting" />
Navigation Three - Submenu
</span>
</template>
<g-menu-item-group title="Item 1">
<g-menu-item key="setting:1">Option 1</g-menu-item>
<g-menu-item key="setting:2">Option 2</g-menu-item>
</g-menu-item-group>
<g-menu-item-group title="Item 2">
<g-menu-item key="setting:3">Option 3</g-menu-item>
<g-menu-item key="setting:4">Option 4</g-menu-item>
</g-menu-item-group>
</g-sub-menu>
<g-menu-item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</g-menu-item>
</g-menu>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const current = ref(['mail'])
const theme = ref(false)
return {
current,
theme
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
API
Menu
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | |
| expandIcon | 自定义展开图标 | slot | (props: {isOpen, record}) => VNode | - | 4.0.0 |
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | horizontal | inline | vertical | |
| multiple | 是否允许多选 | boolean | false | |
| openKeys(v-model) | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - | |
| overflowedIndicator | 自定义 Menu 折叠时的图标 | slot | <EllipsisOutlined /> | |
| selectable | 是否允许选中 | boolean | true | |
| selectedKeys(v-model) | 当前选中的菜单项 key 数组 | string[] | - | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
| theme | 主题颜色 | light | dark | light | |
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | click | hover |
Menu 事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| click | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) |
| deselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, selectedKeys }) |
| openChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) |
| select | 被选中时调用 | function({ item, key, selectedKeys }) |
Menu.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | - | |
| title | 设置收缩时展示的悬浮标题 | string | - |
Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| disabled | 是否禁用 | boolean | false | |
| key | 唯一标志 | string | - | |
| popupClassName | 子菜单样式，mode="inline" 时无效 | string | - | |
| popupOffset | 子菜单偏移量，mode="inline" 时无效 | [number, number] | - | |
| title | 子菜单项值 | string | slot | - |
Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 分组标题 | string | slot | - |
Menu.Divider
菜单项分割线，只用在弹出菜单内。
更多属性请参考 Tooltip。