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.

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.5.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/ActionMenu.css" />

Code

<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>