Dropdown

Toggle contextual overlays for displaying lists of links and more

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering.

Usage

Dropdown is built using <details> HTML5 tag, which creates a disclosure widget where information is visible only into an “open” state. More info here

<details data-dropdown>
  <summary>
    Select an option...
  </summary>
  <ul role="menu">
    <li><a href="#">Dropdown item</a></li>
    <li><a href="#">Dropdown item</a></li>
    <li><a href="#">Dropdown item</a></li>
  </ul>

</details>

Variables

List of variables used. Customize the component’s design by changing or overriding these values:

  --dropdown-border-radius: var(--cssui-radius);
  --dropdown-border-color: var(--cssui-gray-light);
  --dropdown-link-background: var(--cssui-gray-lighter);
  --dropdown-link-color: var(--cssui-gray-darkest);
  --dropdown-panel-background: #fff;
  --dropdown-padding: var(--cssui-padding);