Dropdown

Toggle contextual overlays for displaying lists of links and more. Combine with Lists and other elements to create powerfull dropdowns.

Requires JS

Note that this component requires use our javascript file to works, else you can skip this message if you are already using Perfect UI as a package.

Basic

The dropdown component has two main classes, `.dropdown-trigger`, `.dropdown` and `.ignore`.

`.dropdown-trigger`: Indicates the element that will trigger the dropdown.
`.dropdown`: The dropdown container.
`.ignore`: Ignore the click event on element, so the dropdown will not be closed.

Attention needed

The `.dropdown` should be placed inside of `.dropdown-trigger`, since it has parent-child relation.

The default dropdown menu with dividers.

You can add icons or badges. In the example below was used Bootstrap Icons .

The default dropdown menu with title.

The `.dropdown` element has the bottom direction by default, but you can also use `.dropdown-right`, `.dropdown-left` and `.dropdown-top` directions.

Add `.dropdown-center` class to align the dropdown to the center.

Add `.dropdown-end` class to align the dropdown to the end.

You can combine the dropdown element with many other. Be creative!