Ant Design Vue — Dropdowns and Top Menus

Image for post
Image for post
Photo by Josh Bean 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.

Dropdown

We can add dropdowns with the a-dropdown component.

For example, we can write:

<template>
<div id="app">
<a-dropdown>
<a class="ant-dropdown-link" @click="e => e.preventDefault()">Hover me
<a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">1st menu item</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">2nd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We add the a-dropdown with the a element being its trigger.

a-menu shows the menu.

Context Menu

Also, we can add a context menu by setting the trigger prop to the ['contextmenu'] array:

<template>
<div id="app">
<a-dropdown :trigger="['contextmenu']">
<div
:style="{
textAlign: 'center',
background: '#f7f7f7',
height: '200px',
lineHeight: '200px',
color: '#777',
}"
>Right Click on here</div>
<a-menu slot="overlay">
<a-menu-item key="1">1st menu item</a-menu-item>
<a-menu-item key="2">2nd menu item</a-menu-item>
<a-menu-item key="3">3rd menu item</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Also, we can add a divider and disable menu items:

<template>
<div id="app">
<a-dropdown>
<a class="ant-dropdown-link" @click="e => e.preventDefault()">Hover me
<a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item key="0">
<a target="_blank" rel="noopener noreferrer" href="https://www.google.com/">1st menu item</a>
</a-menu-item>
<a-menu-item key="1">
<a target="_blank" rel="noopener noreferrer" href="https://www.ebay.com/">2nd menu item</a>
</a-menu-item>
<a-menu-divider/>
<a-menu-item key="3" disabled>3rd menu item(disabled)</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

a-menu-divider adds the divider and the disabled prop disables the item.

The placement of the dropdown menu can be changed:

<template>
<div id="app">
<a-dropdown placement="bottomRight">
<a-button>bottom right</a-button>
<a-menu slot="overlay">
<a-menu-item key="0">
<a target="_blank" rel="noopener noreferrer" href="https://www.google.com/">1st menu item</a>
</a-menu-item>
<a-menu-item key="1">
<a target="_blank" rel="noopener noreferrer" href="https://www.ebay.com/">2nd menu item</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We set the placement prop to change the placement.

Menu

We can add a menu with the a-menu component as the container and a-menu-item for the menu items:

<template>
<div id="app">
<a-menu v-model="current" mode="horizontal">
<a-menu-item key="mail">
<a-icon type="mail"/>Navigation One
</a-menu-item>
<a-menu-item key="app" disabled>
<a-icon type="appstore"/>Navigation Two
</a-menu-item>
<a-sub-menu>
<span slot="title" class="submenu-title-wrapper">
<a-icon type="setting"/>Navigation Three - Submenu
</span>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">Option 3</a-menu-item>
<a-menu-item key="setting:4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="google">
<a
href="https://google.com"
target="_blank"
rel="noopener noreferrer"
>Navigation Four - Link</a>
</a-menu-item>
</a-menu>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Conclusion

We can add a dropdown and top menu 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