Ant Design Vue — Submenus

Image for post
Image for post
Photo by billow926 on Unsplash

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Submenus

We can add a submenu with the a-sub-menu component:

<template>
<div id="app">
<a-menu
style="width: 256px"
:default-selected-keys="['1']"
:open-keys.sync="openKeys"
mode="inline"
@click="handleClick"
>
<a-sub-menu key="sub1" @titleClick="titleClick">
<span slot="title">
<a-icon type="mail"/>
<span>Navigation One</span>
</span>
<a-menu-item-group key="g1">
<template slot="title">
<a-icon type="qq"/>
<span>Item 1</span>
</template>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group key="g2" title="Item 2">
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-sub-menu key="sub2" @titleClick="titleClick">
<span slot="title">
<a-icon type="appstore"/>
<span>Navigation Two</span>
</span>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub4">
<span slot="title">
<a-icon type="setting"/>
<span>Navigation Three</span>
</span>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
current: ["mail"],
openKeys: ["sub1"]
};
},
watch: {
openKeys(val) {
console.log("openKeys", val);
}
},
methods: {
handleClick(e) {
console.log("click", e);
},
titleClick(e) {
console.log("titleClick", e);
}
}
};
</script>

We can make the menu toggleable by adding a button:

<template>
<div id="app">
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
<a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
</a-button>
<a-menu
:default-selected-keys="['1']"
:default-open-keys="['sub1']"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
>
<a-menu-item key="1">
<a-icon type="pie-chart"/>
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="desktop"/>
<span>Option 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="inbox"/>
<span>Option 3</span>
</a-menu-item>
<a-sub-menu key="sub1">
<span slot="title">
<a-icon type="mail"/>
<span>Navigation One</span>
</span>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title">
<a-icon type="appstore"/>
<span>Navigation Two</span>
</span>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
collapsed: false
};
},
methods: {
toggleCollapsed() {
this.collapsed = !this.collapsed;
}
}
};
</script>

The inline-collapsed prop is used to set whether the menu is collapsed or not.

We can also make it only open one submenu only bu writing:

<template>
<div id="app">
<a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
<a-sub-menu key="sub1">
<span slot="title">
<a-icon type="mail"/>
<span>Navigation One</span>
</span>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title">
<a-icon type="appstore"/>
<span>Navigation Two</span>
</span>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub4">
<span slot="title">
<a-icon type="setting"/>
<span>Navigation Three</span>
</span>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
rootSubmenuKeys: ["sub1", "sub2", "sub4"],
openKeys: ["sub1"]
};
},
methods: {
onOpenChange(openKeys) {
const latestOpenKey = openKeys.find(
key => this.openKeys.indexOf(key) === -1
);
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.openKeys = openKeys;
} else {
this.openKeys = latestOpenKey ? [latestOpenKey] : [];
}
}
}
};
</script>

Set set the openKeys prop to the key prop value of the menu to open.

The openChange is emitted when we click on a submenu, so we can set the menu item to open there by getting the openKeys and setting it to the one that we clicked on.

Conclusion

We can add menus and submenus with Ant Design Vue.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store