Usage

<dropdown-menu>
  <template #trigger>
    <button>Open Dropdown</button>
  </template>
  
  <template #header> Dropdown Header </template>
  
  <template #body>
    <ul>
      <li v-for="i in 6" :key="i">
        <a href="">Item {{ i }}</a>
      </li>
    </ul>
  </template>
  
  <template #footer> Dropdown Footer </template>
</dropdown-menu>

Props

Name	Description	Type	Options	Default
isOpen	Show or hide for dropdown	Boolean	`true` , `false`	false
mode	Open variant	String	`click` , `hover`	click
dropup	Open the menu upwards	Boolean	`true` , `false`	false
direction	Menu container direction	String	`left` , `right` , `center`	left
closeOnClickOutside	closes dropdown menu when click outside	Booelan	`true` , `false`	true
withDropdownCloser	If there is an element in the menu with dropdown-closer attribute, clicking on it closes the menu.	Boolean	`true` , `false`	false
containerZIndex	z-index of menu container	String	.	994
overlay	background overlay of dropdown menu (only for click mode)	Boolean	`true` , `false`	true
overlayBgColor	background-color of overlay	String	ex: `rgba(1, 35, 83, 0.8)`	rgba(0, 0, 0, 0.2)
overlayZIndex	z-index of overlay	String	.	992
transition	custom vue transition for menu	String	.	default

Slots

Name	Description
trigger	trigger for dropdown menu
header	header of menu container (optional)
body	content of menu (optional)
footer	footer of menu container (optional)

Events (only for click mode)


`@opened="dispatchEvent"`
`@closed="dispatchEvent"`

RegistrationVue2

Demo