Dropdown menu library

Dropdown menu

Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content.

Fully customizable - supports left/right opening, open on hover/click, interactive mode ...

Installation

npm i @innologica/vue-dropdown-menu --save

or

yarn add @innologica/vue-dropdown-menu

import to use:

import DropdownMenu from '@innologica/vue-dropdown-menu'

Example

(boolean) toggle the dropdown
(boolean) open menu on the right side of the element
(boolean) open menu on hover (instead of click)
(boolean) do not close the dropdown until clicked outside
(boolean) do not close the dropdown WHEN clicked outside
(string) the transition for the menu. If checked in the demo we use "translate-fade-down" which is added in the demo component. Below is the source of the css effect.
translate-fade-down.css 
/*translate fade (top to down)*/
.translate-fade-down-enter-active, .translate-fade-down-leave-active {
    transition: all 250ms;
    transition-timing-function: cubic-bezier(.53,2,.36,.85);
}
.translate-fade-down-enter, .translate-fade-down-leave-active {
    opacity: 0;
}
.translate-fade-down-enter, .translate-fade-down-leave-to {
    position: absolute;
}

.translate-fade-down-enter {
    transform: translateY(-10px);
}
.translate-fade-down-leave-active {
    transform: translateY(10px);
}

Demo source

<dropdown-menu
        v-model="show"
        :right="right"
        :hover="hover"
        :interactive="interactive"
>
    <button class="btn btn-primary dropdown-toggle">
        Click to open dropdown
    </button>
    <div slot="dropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</dropdown-menu>

Props

Prop Type Default Description
value Boolean false Opens/closes the dropdown. The component uses v-model to control the state of the dropdown.
right Boolean false Whether to stick the dropdown on the right side of the element.
hover Boolean false If true the menu is open on hover (after hover_time) else it is open on click.
closeOnClickOutside Boolean true Should the menu close when clicked outside
hover_time Integer false Time before the menu opens in hover model. Default: 100ms
transition String '' The vue transition name used to open the menu.

Slots

default

This slot is the element that triggers the dropdown. It can be any HTML element, the components surrounds it with a div which handles the events like hover/click etc.

This slot is the content of the dropdown menu.