Vue comps dropdown

a advanced dropdown menu

Version: 1.3.1 Updated: 09/23/2016

By: vue-comps License: MIT

Downloads Last 30 Days: 176


a advanced dropdown/up/left/right menu.



npm install --save-dev vue-comps-dropdown

or include build/bundle.js.


# in your component
  "dropdown": require("vue-comps-dropdown")
# or, when using bundle.js
  "dropdown": window.vueComps.dropdown
<button> Open Dropdown

altough the dropdown is defined within the button, it will be positioned as a sibling of the parent.

see dev/ for examples.


Name type default description
offset Number 0 horizontal offset
anchor String overlay ? "nw" : "sw" point of the parent where it will be attached
not-dismissable Boolean false will be not close on click outside of dropdown
close-on-click Boolean false will be closed also on click inside of dropdown
constrain-width Boolean false width as parent width
overlay Boolean false will overlay parent
ignore-parent Boolean false will not set-up click listener on parent
is-opened Boolean false (two-way) set to open / close
transition String "dropdown" name of a vue transition. Detailed description
parent element parentElement where the dropdown should attach as a sibling
no-sibling Boolean false position as child instead of sibling of parent
on-body Boolean false will be positioned on body instead of parent element. Detailed description


Name description
before-enter will be called before open animation
after-enter will be called when opened
before-leave will be called before close animation
after-leave will be called when closed
toggled(isOpened:Boolean) emitted when gets opened or closed. Alternative to use two-way is-opened prop


There are three ways of positioning. The default is as a sibling of the parent element, the other posibilities are as a child of the parent element, or on body.

  • The sibling/parent positioning can be problematic when you have an overflow:hidden as a parent to the nearest element with position:absolute|relative|fixed and the dropdown is overflowing.
  • the body positioning can be problematic when the parent is moving relative to body or when you depend on inheritance of styles.


You can provide a vue transition like this:

  // your transition
// or in the instance:
transitions: {
  fade: {
    // your transition
// usage:
template: "<dropdown transition='fade'></dropdown>"

You can access several properties in your enter hook:

enter: function(el,cb) {
  // style properties as numbers


  • 1.3.1
    fixed constrain-width
    making not-dismissable dynamic

  • 1.3.0
    added toggled event
    set default transition

  • 1.2.1
    added on-body prop

  • 1.2.0
    now using vue transitions
    events are renamed after vue transitions

  • 1.1.1
    added no-sibling prop to disable positioning as sibling of parent

  • 1.1.0
    dropdown will be positioned as a sibling of parent


Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.


Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Categories: Vue js