overlays component

ContextMenu

Theme-aware, responsive context menu component.

@wrnexus/ui 0.3.58 props1 slots0 events

Usage

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

<ContextMenu
  size="default"
  color="primary"
  title="Context Menu"
  description="description"
  open="false"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`size`	`string`	Optional	`"default"`
`color`	`string`	Optional	`"primary"`
`title`	`string`	Optional	`"Context Menu"`
`description`	`string`	Optional	`""`
`open`	`boolean`	Optional	`false`
`placement`	`string`	Optional	`"bottom"`
`closeLabel`	`string`	Optional	`"Close"`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/ContextMenu.wrn

component ContextMenu {
  props {
    size = "default"
    color = "primary"
    title = "Context Menu"
    description = ""
    open = false
    placement = "bottom"
    closeLabel = "Close"
    class = ""
  }
  view {
        <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--context-menu wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
        <header>
        <strong>{title}</strong>
        <button type="button" aria-label="{closeLabel}">×</button>
        </header>
      {#if description}<p>{description}</p>{/if}
      <slot />
        </div>
    }
}