Context Menu
v0.0.10
mix mishka.ui.gen.headless context_menu
Class attributes
The class attributes on the root style the rows its slots draw. item_class reaches an item, a link, a checkbox row, a radio row and the trigger of a submenu. separator_class reaches a separator row and group_label_class a label row. indicator_class styles the check or the dot of a checkbox or radio row. chevron_class, submenu_class and submenu_popup_class style the arrow, the wrapper and the popup of a submenu. They come before the slot's own class, so a row can still add classes of its own. A :submenu slot also takes trigger_class and popup_class for its own trigger and popup.
The context_menu_* components do not read these. Each takes its own class, and the ones that draw a part of their own take one more: indicator_class on context_menu_checkbox and context_menu_radio, group_label_class on context_menu_group and context_menu_radio_group, and trigger_class, popup_class and chevron_class on context_menu_submenu. The rows inside a :submenu slot are these components.
Parts & data attributes
Each part carries a stable data-part and a structural chelekom-context_menu__* class you can target, plus paired-presence state for open/closed transitions. The class attributes in the Purpose column are the root's, for the rows its slots draw.
| Part | data-part | State / ARIA | Purpose |
|---|---|---|---|
| Trigger | trigger | aria-haspopup, aria-expanded, aria-controls, data-popup-open | The area to right-click / long-press to open the menu at the cursor; takes trigger_class. |
| Popup | popup | role="menu", data-open, data-closed, data-starting-style | The menu surface, positioned fixed at the cursor; takes popup_class. |
| Item | item | role="menuitem", data-highlighted, data-disabled | A plain, activatable row; takes item_class. |
| Checkbox item | checkbox-item | role="menuitemcheckbox", aria-checked, data-checked, data-unchecked, data-highlighted, data-disabled | A toggleable row; takes item_class. |
| Radio group / Radio item | radio-group / radio-item | role="group" / role="menuitemradio", aria-checked, data-value, data-checked, data-unchecked, data-highlighted, data-disabled | Single-select rows sharing a name/group; a radio row takes item_class. |
| Checkbox / radio indicator | checkbox-item-indicator / radio-item-indicator | aria-hidden, data-checked, data-unchecked | The check or the dot inside a row; takes indicator_class. |
| Link item | link-item | role="menuitem", data-highlighted | Renders as an anchor with an href; takes item_class. |
| Separator | separator | role="separator", data-orientation | Visual divider between rows; takes separator_class. |
| Group / Group label | group / group-label | role="group" / role="presentation" | Labeled row groupings; the label takes group_label_class. |
| Submenu | submenu | - | Wraps a submenu trigger and its popup; takes submenu_class. |
| Submenu trigger / Submenu popup | submenu-trigger / submenu-popup | aria-haspopup, aria-expanded, aria-controls, data-popup-open, data-highlighted, data-disabled, data-open, data-closed | Opens a nested menu on hover or ArrowRight; the trigger takes item_class and the popup submenu_popup_class. |
| Submenu chevron | submenu-chevron | aria-hidden | The arrow in a submenu trigger; takes chevron_class. |
Accessibility
Follows the WAI-ARIA Menu pattern: focus moves into the popup on open and is restored to the previous element on close. Up/Down navigate, Home/End jump to the first/last enabled row, ArrowRight opens a submenu, ArrowLeft or Escape closes it, and typing performs typeahead. Enter or Space activates the highlighted row.
Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | Unique id (anchors aria relationships) |
disabled
|
boolean
|
false
| — | No | Disable all interaction |
on_open_change
|
string
| — | — | No | LiveView event pushed on open/close ({open}) |
on_open_change_target
|
string
| — | — | No | Optional pushEventTo target for on_open_change |
class
|
any
| — | — | No | Extra classes for the root |
item_class
|
any
| — | — | No | — |
separator_class
|
any
| — | — | No | — |
group_label_class
|
any
| — | — | No | — |
submenu_popup_class
|
any
| — | — | No | — |
trigger_class
|
any
| — | — | No | Extra classes for the trigger wrapper |
popup_class
|
any
| — | — | No | Extra classes for the popup surface |
chevron_class
|
any
| — | — | No | — |
indicator_class
|
any
| — | — | No | — |
submenu_class
|
any
| — | — | No | — |
rest
|
global
| — | — | No | — |
Slots
| Name | Required | Description |
|---|---|---|
trigger
| Yes | The area to right-click / long-press to open the menu |
item
| No | A menu row (idiomatic slot API) |
submenu
| No | A nested submenu; put its rows (context_menu_item, ...) inside |
inner_block
| No | Compose rows with the context_menu_* components instead of <:item> |
Attributes of the item slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
type
|
string
| — | — | No | item (default) | checkbox | radio | link | separator | label |
disabled
|
boolean
| — | — | No | — |
checked
|
boolean
| — | — | No | checkbox / radio |
value
|
string
| — | — | No | radio value |
name
|
string
| — | — | No | radio group name (single-selects items sharing it) |
href
|
string
| — | — | No | link href |
label
|
string
| — | — | No | group label text / typeahead override |
keep_open
|
boolean
| — | — | No | don't close the menu when activated |
on_change
|
string
| — | — | No | checkbox/radio change event ({checked}/{value}) |
on_change_target
|
string
| — | — | No | — |
class
|
any
| — | — | No | Extra classes for this row's rendered part |
Attributes of the submenu slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
label
|
string
| — | — | Yes | — |
disabled
|
boolean
| — | — | No | — |
trigger_class
|
any
| — | — | No | Extra classes for the submenu trigger |
popup_class
|
any
| — | — | No | Extra classes for the submenu popup |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--type
|
context_menu
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.headless context_menu