Dropdown menu - Web Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Parameters ​

The Web component uses the <z-action-menu> tag:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
contentstringText of the dropdown
elementsObject[]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.

elements ​

The elements attribute is used to set the elements of the dropdown menu.

Example

The elements object also allows nested elements.

Example

The elements object also allows sections and separators.

Example

Finally the elements object also allows icons.

Example

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/action-menu.js"></script>
Code
html
<z-action-menu
  elements='[{"text":"First Action", "icon":"bookmark:line"}, {"text":"Second Action", "icon":"clock:line"}, {"text":"Third Action", "icon":"gear:line"}, {"text":"Fourth Action", "icon":"user-male:line"}]'>
  Action menu example
</z-action-menu>