Dropdown menu - Web Component
...
Browser support
Parameters
The Web component uses a <z-dropdown-menu>
tag.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
content | string | Text of the dropdown |
elements | Object[] | Array of dropdown elements |
INFO
Check the z-dropdown-menu
anatomy to know the specifications for this component. Use the Playground to see how you can customize this component.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/dropdown-menu.js"></script>
Code
html
<z-dropdown-menu
elements='[{"text":"First Action", "icon":"bookmark:outline"}, {"text":"Second Action", "icon":"clock:outline"}, {"text":"Third Action", "icon":"gear:outline"}, {"text":"Fourth Action", "icon":"user-male:outline"}]'>
Dropdown example
</z-dropdown-menu>