Menu
v0.0.10
mix mishka.ui.gen.headless 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, and chevron_class the arrow of a submenu. submenu_class, submenu_trigger_class and submenu_popup_class style the wrapper, the trigger and the popup of a submenu. They come before the slot's own class, and an :item slot adds its own indicator_class after the root's, so a row can still add classes of its own. The :check_icon slot replaces the glyph in every checkbox and radio indicator.
The 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 menu_checkbox and menu_radio, label_class on menu_group and menu_radio_group, and trigger_class, popup_class and chevron_class on 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-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, data-disabled | The button that opens the menu; takes trigger_class. |
| Popup | popup | role="menu", data-open, data-closed, data-side, data-align | The menu surface, anchored and flipped to stay in the viewport; takes popup_class. |
| Item | item | role="menuitem", data-highlighted, data-disabled | A plain, activatable row; takes item_class. |
| Checkbox item / indicator | checkbox-item / checkbox-item-indicator | role="menuitemcheckbox", aria-checked, data-checked, data-unchecked, data-highlighted, data-disabled | A toggleable row with a checked indicator span; the row takes item_class and the indicator indicator_class. |
| Radio group / Radio item / indicator | radio-group / radio-item / radio-item-indicator | role="group" / role="menuitemradio", aria-checked, data-value, data-checked, data-unchecked, data-highlighted, data-disabled | Single-select rows sharing a name; the row takes item_class and the indicator indicator_class. |
| Link item | link-item | role="menuitem", data-highlighted | Renders as an anchor with an href; takes item_class. |
| Group / Group label | group / group-label | role="group" / role="presentation", aria-labelledby | Labeled row groupings; a label row takes group_label_class. |
| Separator | separator | role="separator", data-orientation | A visual divider between rows; takes separator_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 submenu_trigger_class, 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 Button pattern: focus moves into the popup on open and is restored to the trigger 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 |
side
|
string
|
bottom
|
toprightbottomleft
| No | Preferred side to anchor the popup |
align
|
string
|
start
|
startcenterend
| No | Alignment along the side |
side_offset
|
integer
|
4
| — | No | Gap between the trigger and popup (px) |
align_offset
|
integer
|
0
| — | No | Offset along the alignment axis (px) |
open_on_hover
|
boolean
|
false
| — | No | Open on trigger hover (with delay) |
delay
|
integer
|
100
| — | No | Hover open delay (ms) |
close_delay
|
integer
|
0
| — | No | Hover close delay (ms) |
loop
|
boolean
|
true
| — | No | Loop arrow-key focus past the ends |
class
|
any
| — | — | No | Extra classes for the root |
item_class
|
any
| — | — | No | — |
separator_class
|
any
| — | — | No | — |
group_label_class
|
any
| — | — | No | — |
indicator_class
|
any
| — | — | No | — |
trigger_class
|
any
| — | — | No | Extra classes for the trigger button part |
popup_class
|
any
| — | — | No | Extra classes for the popup part |
chevron_class
|
any
| — | — | No | — |
submenu_class
|
any
| — | — | No | — |
submenu_popup_class
|
any
| — | — | No | — |
submenu_trigger_class
|
any
| — | — | No | — |
rest
|
global
| — | — | No | — |
Slots
| Name | Required | Description |
|---|---|---|
trigger
| Yes | The button that opens the menu |
check_icon
| No | Shared glyph rendered inside every checkbox/radio item indicator (overrides the default ✓/●) |
item
| No | A menu row (idiomatic slot API) |
submenu
| No | A nested submenu; put its rows (menu_item, ...) inside |
inner_block
| No | Compose rows with the 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 part |
indicator_class
|
any
| — | — | No | Extra classes for the checkbox/radio indicator part |
Attributes of the submenu slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
label
|
string
| — | — | Yes | — |
disabled
|
boolean
| — | — | No | — |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--type
|
menu
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.headless menu