Ant Design Vue — Dropdowns and Top Menus

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.