Dropdown menu - CSS Component

Browser support

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.

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.

Example

• Item 1
• Item 2

The dropdown component also allows nested elements.

Example

• Item 1

  • Subitem 1
  • Subitem 2
• Item 2

The dropdown items can be separated by a divider. And also, separated by a section heading.

Example

• Item 1
• Item 2
Section 1
• Item 3
• Item 4
Section 2
• Item 5
• Item 6

Each item can have an icon.

Example

• Item 1
• Item 2

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/DropdownMenu.css" />

Code

<nav z-dropdown-menu='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>