overlays component

DropdownMenu

Reusable dropdown menu component.

@wrnexus/ui 0.2.642 props1 slots1 events

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

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`label`	`string`	Optional	`"Menu"`

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>
  }
}