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
The Propeller CSS classes apply various predefined visual enhancements to the dropdown. The table lists the available classes and their effects.
|Used to create a dropdown menu.
|Used when you want the dropdown menu to open from bottom right.
|Used when you want the dropdown menu to open from top left.
|Used when you want the dropdown menu to open from top right.
|Add this class to the button for open and close of the dropdown menu.
|Add this class to the button to open the dropdown menu on hover.
Call the jQuery plugin to initialize the dropdown while fetching the data dynamically.
All dropdown events are fired at the
.dropdown-menu's parent element. All dropdown events have a
relatedTarget property, whose value is the toggling anchor element. See here for more documentation on this.
|This event fires immediately when the show instance method is called.
|This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
|This event is fired immediately when the hide instance method has been called.
|This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).