Dropdown ​

...

Browser support ​

...

Parameters ​

The CSS component uses a <nav> tag with the z-dropdown HTML custom attribute.

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

NameTypeDescription
z-dropdownstringCustom attribute for the accordion component

INFO

Check the z-dropdown 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.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Dropdown.css" />
Code
html
<nav z-dropdown='default'>
  <a href='#'>Dropdown example</a>

  <ul>
    <li icon="bookmark:outline">First Action</li>
    <li icon="clock:outline">Second Action</li>
    <li icon="gear:outline">Third Action</li>
    <li icon="user-male:outline">Fourth Action</li>
  </ul>
</nav>