Skip to content

x-context-menu.md

Latest commit

 

History

History
136 lines (96 loc) · 4.39 KB

x-context-menu.md

File metadata and controls

136 lines (96 loc) · 4.39 KB

x-context-menu

A positioned dropdown overlay that opens on a trigger click. Items are placed in the default slot. The panel auto-flips when it would overflow the viewport.

Tag

<x-context-menu></x-context-menu>

Attributes

Attribute Type Default Description
open boolean false Whether the menu is visible
disabled boolean false Disables trigger and interactions
placement enum "bottom-start" Preferred panel placement: bottom-start bottom-end top-start top-end right-start left-start
offset number 8 Distance in pixels between anchor and panel
z-index number 1000 CSS z-index of the floating panel

Properties

Property Type Reflects attribute
open boolean open
disabled boolean disabled
placement string placement
offset number offset
zIndex number z-index

Events

Event Cancelable Detail Description
x-context-menu-open-request yes { reason } Fired before opening
x-context-menu-open no { reason } Fired after opening
x-context-menu-close-request yes { reason } Fired before closing
x-context-menu-close no { reason } Fired after closing
x-context-menu-select no { item } Fired when a menu item is selected

Slots

Slot Description
(default) Menu item elements

Slotted items with role="menuitem" are keyboard-navigable via ArrowUp / ArrowDown and selectable with Enter / Space.

The component does not own a trigger element. Use openAt(x, y) or openForElement(el) to open the menu from your own trigger handler.

Auto-flip

The panel is positioned using pure DOM geometry. When the preferred placement overflows the viewport, the panel flips to the opposite side. The position is clamped to viewport margins.

Keyboard

Key Action
ArrowDown Focus next menu item
ArrowUp Focus previous menu item
Enter Select focused item, close menu
Space Select focused item, close menu
Escape Close menu
Tab Close menu

Accessibility

  • The panel has role="menu".
  • Each role="menuitem" item is keyboard navigable.
  • Set aria-haspopup="menu" and toggle aria-expanded on your own trigger element in response to the x-context-menu-open and x-context-menu-close events.

Responsive

The panel max-width is capped at calc(100vw - 1rem) to prevent horizontal overflow on narrow viewports.

Examples

Basic

<x-context-menu>
  <button slot="trigger">Actions ▾</button>
  <div role="menuitem">Edit</div>
  <div role="menuitem">Duplicate</div>
  <div role="menuitem" style="color:red">Delete</div>
</x-context-menu>

Custom placement

<x-context-menu placement="bottom-end" offset="4">
  <button slot="trigger">⋯</button>
  <div role="menuitem">Rename</div>
  <div role="menuitem">Move</div>
</x-context-menu>

Listening to select

document.querySelector('x-context-menu')
  .addEventListener('x-context-menu-select', e => {
    console.log('selected', e.detail.item);
  });

ClojureScript (hiccup renderer)

[:x-context-menu
 [:button {:slot "trigger"} "Actions ▾"]
 [:div {:role "menuitem"} "Edit"]
 [:div {:role "menuitem"} "Duplicate"]
 [:div {:role "menuitem" :style "color:red"} "Delete"]]