Dropdown

Adds a button that can show/hide dropdown content when it is hovered over, or clicked. When it is clicked, the content will persist until the user clicks out or focuses out. Includes relevant ARIA attributes for the hidden content.

• Source

Styled Examples

NOTE:

Dialog background colors have been removed. The following styles have been added to this site to make the dialogs easier to see:

.color-black {
  color: #000;
}
.bg-white {
  background-color: #FFF;
}

Unstyled Examples

Position top

With a transition

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, trigger: string, content: string }"