# Menu
Top bar
Top bar NavMenu can be used in a variety of scenarios.
<c-menu :selected.sync="selectedMenu" :multiple="false">
<c-menu-item name="home">Home</c-menu-item>
<c-sub-menu name="about">
<template slot="title">About</template>
<c-menu-item name="about1">About1</c-menu-item>
<c-menu-item name="about2">About1</c-menu-item>
<c-sub-menu name="contact">
<template slot="title">Contact</template>
<c-menu-item name="qq">QQ</c-menu-item>
<c-menu-item name="phone">Phone</c-menu-item>
<c-menu-item name="wechat">WeChat</c-menu-item>
</c-sub-menu>
</c-sub-menu>
<c-menu-item name="hire">Hire</c-menu-item>
<c-menu-item name="google">
<a href="https://google.com" target="_blank">Google</a>
</c-menu-item>
</c-menu>
显示代码
Side bar
Vertical NavMenu with sub-menus.
<c-menu
:selected.sync="selectedMenu2"
:multiple="false"
direction="vertical"
style="width: 265px;"
>
<c-menu-item name="home">Home</c-menu-item>
<c-sub-menu name="about">
<template slot="title">About</template>
<c-menu-item name="about1">About1</c-menu-item>
<c-menu-item name="about2">About1</c-menu-item>
<c-sub-menu name="contact">
<template slot="title">Contact</template>
<c-menu-item name="qq">QQ</c-menu-item>
<c-menu-item name="phone">Phone</c-menu-item>
<c-menu-item name="wechat">WeChat</c-menu-item>
</c-sub-menu>
</c-sub-menu>
<c-menu-item name="hire">Hire</c-menu-item>
<c-menu-item name="google">
<a href="https://google.com" target="_blank">Google</a>
</c-menu-item>
</c-menu>
Expand
Menu Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
selected | The selected menu item needs to be used with the .sync modifier | Array | —— | —— |
multiple | Whether to support multiple selection, if set to true, just pass in an item in selected | Boolean | —— | false |
direction | The direction of the menu | String | horizontal / vertical | horizontal |
Sub-Menu Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
name | Unique key | string | —— | —— |
Menu-Item Attributes
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
name | Unique key | string | —— | —— |
← Layout Pagination →