Action menu - Web Component
The ActionMenu component can be used imported from:
Playground
Parameters
The Web component uses the <z-action-menu> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
content | string | Text of the dropdown | default | |
elements | Object[] | Array of dropdown elements |
INFO
Check the z-action-menu anatomy to know the specifications for this component. Use the Playground to see how you can customize this component.
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | Content of the action menu |
elements | span | Action menu elements |
Parameters use
elements
The elements attribute is used to set the elements of the dropdown menu.
The elements object also allows nested elements.
The elements object also allows sections and separators.
Finally the elements object also allows icons.
Alternatively, you can use the elements slot to set the elements of the dropdown menu. We use specific components per type of element:
<a>for link and sub-menu (in case of more elements). For defining a sub-navigation use the attributedata-textfor the link text and place the children of the menu inside:<hr>for separator<span>for section header
Browser support
Detected engine:
Chromium
Webkit
Gecko