DropdownMenu

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DropdownMenu
  label="Menu"
/>

Legacy mount name: data-component="DropdownMenu".

Props and attributes

Slots

• default

Events

• click

Source contract

Installed source: components/DropdownMenu.wrn

component DropdownMenu {
  props {
    class = ""
    label = "Menu"
  }
  state open = false
  view {
        <div class="relative inline-block {class}">
        <button type="button" aria-haspopup="menu" aria-expanded="{open}" @click="open = !open" class="inline-flex min-h-11 items-center gap-2 rounded-xl border border-slate-300 px-4 text-sm font-semibold dark:border-slate-700">{label}<span aria-hidden="true">⌄</span>
        </button>
        <div data-show="open" role="menu" class="absolute right-0 z-30 mt-2 min-w-48 rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl dark:border-slate-800 dark:bg-slate-900">
        <slot />
        </div>
        </div>
    }
}