Skip to content
Vuejs 2 / Drop.js dropdown content component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix hover close delay option Mar 16, 2017
LICENSE Initial commit Jan 27, 2017
index.js Initial commit Jan 27, 2017
package.json update package.json for version 0.4.1 Mar 19, 2017



A super simple Vuejs2 dropdown component using drop.js

Droppler is a Vue 2 component for creating fixed position "dropdown" content using drop.js.

Droppler supports all of the options for drop.js.


npm install vue-droppler


Register droppler as a global component:

Vue.component('droppler', require('vue-droppler'));

or use it in a single component:

var Droppler = require('droppler');

components: {
    'droppler': Droppler

Basic example

    <button slot="drop-trigger">Click me</button>
    <div slot="drop-content">
        Some content for the dropdown.


Here is the options object with default values. Any of these can be passed to droppler using a property.

For more information about these options, have a look at the drop.js documentation

    position: 'bottom left',
    openOn: 'click',
    classes: 'drop-theme-basic',
    constrainToWindow: false,
    constrainToScrollParent: false,
    hoverOpenDelay:  0,
    hoverCloseDelay:  50,
    focusDelay:  0,
    blurDelay: 50,
    tetherOptions: {}

Example with options

<droppler position="top right" openOn="hover" constrainToWindow="true">
    <button slot="drop-trigger" href="#">Click me</button>
    <div slot="drop-content">
        Some content for the dropdown.


Copyright © 2017 Joe Archer - MIT License

You can’t perform that action at this time.