Simple Vue Dropdown Component

In this quick tutorial, I’ll show you how you can create a very simple dropdown component with Vue. For this example, I use Bulma CSS to style my dropdown but you can replace it with your custom styling.

I’m also using this clickaway Vue directive to close the dropdown when a mouse click is triggered outside of the dropdown content. This library is very handy.

<template>
  <div
    class="dropdown is-right"
    v-bind:class="{ 'is-active': isDropdownActive }"
    v-on-clickaway="away"
  >
    <div
      class="dropdown-trigger"
      @click="isDropdownActive=!isDropdownActive"
    >
      <a
        aria-haspopup="true"
        aria-controls="{ 'dropdown-menu'}"
      >
        <span>More</span>
        <span class="icon is-small">
          <i
            class="fa fa-angle-down"
            aria-hidden="true"
          ></i>
        </span>
      </a>
    </div>
    <div
      class="dropdown-menu"
      id="dropdown-menu"
      role="menu"
    >
      <div class="dropdown-content">
        <a
          href="#"
          class="dropdown-item has-text-centered"
        >
          <span>Some Action</span>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway';
export default {
  props: ['id'],
  mixins: [ clickaway ],
  data() {
    return {
      isDropdownActive: false,
    }
  },
  methods: {
    away() {
      this.isDropdownActive = false;
    }
  }
};
</script>
<style scoped>
</style>

I’m using this Vue single component everywhere on Cronhub. It is often very useful to extract different behaviors into single components.

I hope this was helpful!