A dropdown is an HTML component that allows the user to choose one value from a list. It is similar to the select box.
Propeller Dropdown consists of Bootstrap HTML structure with Propeller customized classes based on material design standards.
Types - Based on the type of content, Propeller Dropdown can be categorized into three types: with header, with divider, and with disabled links.
Dropdown with Directions
Dropdown can start from different directions such as from bottom left, bottom right, top left, top right. Add
.dropdown-menu-right to make the dropdown open from bottom-right,
.pmd-dropdown-menu-top-left to make the dropdown open from top-left and
.pmd-dropdown-menu-top-right to make the dropdown open from top-right.
Bottom Left Direction
Bottom Right Direction
Top Left Direction
Top Right Direction
Dropdown with Hover event
In this case, we are showing the dropdown on the hover of a particular button. In order to open the dropdown on hover, add
.pmd-dropdown-hover to the button.
Hover with header
Hover with divider
Hover with disabled menu items