Dropdown menu - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component uses a <nav>
tag with the z-action-menu
HTML custom attribute.
z-action-menu
The z-action-menu
parameter is the main parameter used to render the dropdown menu component.
The dropdown component also allows nested elements.
The dropdown items can be separated by a divider. And also, separated by a section heading.
Each item can have an icon.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/ActionMenu.css" />
Code
html
<nav z-action-menu='default'>
<a href='#'>Dropdown example</a>
<ul>
<li icon="bookmark:line">First Action</li>
<li icon="clock:line">Second Action</li>
<li icon="gear:line">Third Action</li>
<li icon="user-male:line">Fourth Action</li>
</ul>
</nav>