Dropdown menu - CSS Component โ
Browser support โ
Detected engine: ย
Chromium
Webkit
Gecko
Construction โ
The CSS component uses a <nav>
tag with the z-dropdown-menu
HTML custom attribute.
z-dropdown-menu
โ
The z-dropdown-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.4.4/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.4/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.4/@zurich/css-components/DropdownMenu.css" />
Code
html
<nav z-dropdown-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>