OverlayDropdown

A menu on the Popover API, with the keyboard of the menu pattern and typeahead.

import { OverlayDropdown } from '@zairakai/vue-components/Overlay'

Usage

<OverlayDropdown />

Example

<template>
  <OverlayDropdown label="Actions">
    <template #trigger="{ attrs }">
      <button
        type="button"
        v-bind="attrs"
      >
        Actions
      </button>
    </template>
    <OverlayDropdownItem>Edit</OverlayDropdownItem>
    <OverlayDropdownItem>Duplicate</OverlayDropdownItem>
    <OverlayDropdownItem disabled>Delete</OverlayDropdownItem>
  </OverlayDropdown>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	boolean	undefined
placement	string	'bottom-start'
label	string

Events

Name	Description
update:modelValue

Slots

Name	Description
trigger
default

See Theming for the class hooks and the data-* state of the components.