Tu View PlusMenu
A versatile menu for navigation.
Horizontal
By setting mode to horizontal, you can use the horizontal menu.
...
Navigation 1
Navigation 2
Navigation 3
Navigation 4
<template>
<tu-menu mode="horizontal" :default-selected-keys="['1']">
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
</template><template>
<tu-menu mode="horizontal" :default-selected-keys="['1']">
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
</template>Sider
Side menu is used in conjunction with the layout component.
Navigation 1
Navigation 2
Navigation 3
Menu 1
Menu 2
Navigation 4
<template>
<tu-menu
style="width: 200px; border-radius: 4px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
</template><template>
<tu-menu
style="width: 200px; border-radius: 4px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
</template>Effects
Menu provide five different themes: outset、inset、bordered、outlined and flat. Using effect to change, default is outset.
Navigation 1
Navigation 2
Navigation 3
Menu 1
Menu 2
Navigation 4
...
Navigation 1
Navigation 2
Navigation 3
Navigation 4
<template>
<tu-radio-group class="mb-2" v-model="effect" type="button">
<tu-radio label="default">default</tu-radio>
<tu-radio label="flat">flat</tu-radio>
<tu-radio label="outset">outset</tu-radio>
<tu-radio label="inset">inset</tu-radio>
<tu-radio label="bordered">bordered</tu-radio>
<tu-radio label="outlined">outlined</tu-radio>
</tu-radio-group>
<tu-menu
class="mb-2"
style="width: 200px; border-radius: 4px"
:effect="effect"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
<tu-menu mode="horizontal" :effect="effect" :default-selected-keys="['1']">
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const effect = ref('outset');
</script><template>
<tu-radio-group class="mb-2" v-model="effect" type="button">
<tu-radio label="default">default</tu-radio>
<tu-radio label="flat">flat</tu-radio>
<tu-radio label="outset">outset</tu-radio>
<tu-radio label="inset">inset</tu-radio>
<tu-radio label="bordered">bordered</tu-radio>
<tu-radio label="outlined">outlined</tu-radio>
</tu-radio-group>
<tu-menu
class="mb-2"
style="width: 200px; border-radius: 4px"
:effect="effect"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
<tu-menu mode="horizontal" :effect="effect" :default-selected-keys="['1']">
<tu-menu-item key="1">Navigation 1</tu-menu-item>
<tu-menu-item key="2">Navigation 2</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">Navigation 4</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const effect = ref('outset');
</script>Collapsed
Use collapsed to specify the menu to collapse.
Navigation 1
Navigation 2
Navigation 3
Menu 1
Menu 2
Navigation 4
<template>
<tu-button class="mb-2" @click="collapsed = !collapsed">
<template #icon>
<Fold v-if="collapsed" />
<Expand v-else />
</template>
</tu-button>
<tu-menu style="width: 200px" :default-selected-keys="['1']" :collapsed="collapsed">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Fold, Expand, Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
const collapsed = ref(false);
</script><template>
<tu-button class="mb-2" @click="collapsed = !collapsed">
<template #icon>
<Fold v-if="collapsed" />
<Expand v-else />
</template>
</tu-button>
<tu-menu style="width: 200px" :default-selected-keys="['1']" :collapsed="collapsed">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Fold, Expand, Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
const collapsed = ref(false);
</script>Responsive Collapsed
set breakpoint for responsive contraction.
Navigation 1
Navigation 2
Navigation 3
Menu 1
Menu 2
Navigation 4
<template>
<tu-menu style="width: 200px" breakpoint="xl" :default-selected-keys="['1']">
<tu-menu-item key="1">
<template #icon>
<tu-icon> <Menu /> </tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon> <Tools /> </tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon> <UploadFilled /> </tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon> <Promotion /> </tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu style="width: 200px" breakpoint="xl" :default-selected-keys="['1']">
<tu-menu-item key="1">
<template #icon>
<tu-icon> <Menu /> </tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon> <Tools /> </tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon> <UploadFilled /> </tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon> <Promotion /> </tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>Sub Menu
Multiple sub-items can be embedded in the menu, and the items that are opened by default can be set through openKeys.
Navigation 1
Navigation 2
Navigation 3
Menu 1
Menu 2
Navigation 4
<template>
<tu-menu style="width: 200px; height: 300px" :default-selected-keys="['1']" show-collapse-button>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu style="width: 200px; height: 300px" :default-selected-keys="['1']" show-collapse-button>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>Group Menu
using tu-menu-group to group.
Navigation 1
Navigation 2
Navigation 3
Title 1
Menu 1
Menu 2
Title 2
Menu 3
Menu 4
Navigation 4
<template>
<tu-menu
style="width: 200px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item-group title="Title 1">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-menu-item-group>
<tu-menu-item-group title="Title 2">
<tu-menu-item key="3-3">Menu 3</tu-menu-item>
<tu-menu-item key="3-4">Menu 4</tu-menu-item>
</tu-menu-item-group>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu
style="width: 200px"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item-group title="Title 1">
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-menu-item-group>
<tu-menu-item-group title="Title 2">
<tu-menu-item key="3-3">Menu 3</tu-menu-item>
<tu-menu-item key="3-4">Menu 4</tu-menu-item>
</tu-menu-item-group>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>Floating Menu
Specify mode as pop to use floating menu.
Navigation 1
Navigation 2
Navigation 3
Navigation 4
<template>
<tu-menu style="width: 200px" mode="pop">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script><template>
<tu-menu style="width: 200px" mode="pop">
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
<tu-sub-menu key="3" title="Navigation 3">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">Menu 1</tu-menu-item>
<tu-menu-item key="3-2">Menu 2</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
Navigation 4
</tu-menu-item>
</tu-menu>
</template>
<script lang="ts" setup>
import { Menu, Tools, UploadFilled, Promotion } from '@tu-view-plus/icons-vue';
</script>Floating Button Menu
By setting mode to popButton, you can use a button group style floating menu.
<template>
<div class="menu-demo">
<tu-trigger
:trigger="['click', 'hover']"
:popupOffset="20"
clickClose
position="top"
v-model:popupVisible="visible"
>
<tu-button class="menu-trigger-demo">Menu</tu-button>
<template #content>
<tu-menu style="width: 200px" mode="popButton" showCollapseButton>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
</tu-menu>
</template>
</tu-trigger>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Menu, Tools } from '@tu-view-plus/icons-vue';
const visible = ref(false);
</script>
<style lang="scss" scoped>
.menu-demo {
position: relative;
box-sizing: border-box;
width: 660px;
height: 180px;
padding: 40px;
}
.menu-trigger-demo{
position: absolute;
bottom: 20px;
}
</style><template>
<div class="menu-demo">
<tu-trigger
:trigger="['click', 'hover']"
:popupOffset="20"
clickClose
position="top"
v-model:popupVisible="visible"
>
<tu-button class="menu-trigger-demo">Menu</tu-button>
<template #content>
<tu-menu style="width: 200px" mode="popButton" showCollapseButton>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
Navigation 1
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
Navigation 2
</tu-menu-item>
</tu-menu>
</template>
</tu-trigger>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Menu, Tools } from '@tu-view-plus/icons-vue';
const visible = ref(false);
</script>
<style lang="scss" scoped>
.menu-demo {
position: relative;
box-sizing: border-box;
width: 660px;
height: 180px;
padding: 40px;
}
.menu-trigger-demo{
position: absolute;
bottom: 20px;
}
</style>Menu API
Menu Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| theme | Menu theme | String | light |
| mode | The mode of menu | String | vertical |
| effect | Effect of menu | String | outset |
| level-indent | Indentation between levels | Number | - |
| auto-open | Expand all multi-level menus by default | Boolean | false |
| collapsed | Whether to collapse the menu | Boolean | - |
| default-collapsed | Whether to collapse the menu by default | Boolean | false |
| collapsed-width | Collapse menu width | Number | - |
| accordion | Turn on the accordion effect | Boolean | false |
| auto-scroll-into-view | Whether to automatically scroll the selected item to the visible area | Boolean | false |
| show-collapse-button | Whether built-in folding button | Boolean | false |
| selected-keys | The selected menu item key array | Array | - |
| default-selected-keys | The key array of the menu items selected by default | Array | [] |
| open-keys | Expanded submenu key array | Array | - |
| default-open-keys | The default expanded submenu key array | Array | [] |
| scroll-config | Scroll to the configuration items in the visible area | Object | - |
| trigger-props | Accept all Props of Trigger in pop-up mode | Object | - |
| tooltip-props | Accept all Props of ToolTip in pop-up mode | Object | - |
| auto-open-selected | Expand the selected menus by default | Boolean | false |
| breakpoint | Responsive breakpoints | String | - |
| popup-max-height | The maximum height of popover | BooleanNumber | true |
Menu Events
| Name | Description | Type |
|---|---|---|
| collapse | Triggered when the collapsed state changes | Function |
| menu-item-click | Triggered when the menu item is clicked | Function |
| sub-menu-click | Triggered when the submenu is clicked | Function |
Menu Slots
| Name | Description |
|---|---|
| collapse-icon | Collapse icon |
| expand-icon-right | Icon expand right |
| expand-icon-down | Icon expand down |
Sub-Menu Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | The title of the submenu | String | - |
| selectable | In the pop-up mode, whether the multi-level menu header is also used as a menu item to support the state such as click to select | Boolean | false |
| popup | Whether to force the use of pop-up mode, level indicates the level of the current submenu | BooleanFunction | false |
| popup-max-height | The maximum height of popover | BooleanNumber | true |
Sub-Menu Slots
| Name | Description |
|---|---|
| title | Title |
| expand-icon-right | Icon expand right |
| expand-icon-down | Icon expand down |
| icon | The icon of menu item |
Menu-Item-Group Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | The title of the menu group | String | - |
Menu-Item-Group Slots
| Name | Description |
|---|---|
| title | Title |
Menu-Item Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| disabled | Whether to disable | Boolean | false |
Menu-Item Slots
| Name | Description |
|---|---|
| icon | The icon of menu item |