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#

This is the list of variables related to this component. You can customize the 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);