A dropdown is an HTML component that allows the user to choose one value from a list. It is similar to the select box.
Bootstrap Dropdown
Dropdown is toggleable, contextual overlay for displaying lists of links and more. It is made interactive with the included Bootstrap dropdown JavaScript plugin.
Propeller Dropdown
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.
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.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the dropdown. The table lists the available classes and their effects.
Propeller Class | Effect | Remark |
---|---|---|
.dropdown-menu |
Used to create a dropdown menu. | Required |
.dropdown-menu-right |
Used when you want the dropdown menu to open from bottom right. | Optional |
.pmd-dropdown-menu-top-left |
Used when you want the dropdown menu to open from top left. | Optional |
.pmd-dropdown-menu-top-right |
Used when you want the dropdown menu to open from top right. | Optional |
.dropdown-toggle |
Add this class to the button for open and close of the dropdown menu. | Required |
.pmd-dropdown-hover |
Add this class to the button to open the dropdown menu on hover. | Optional |
jQuery plugin
Call the jQuery plugin to initialize the dropdown while fetching the data dynamically.
Bootstrap Events
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.
Event Type | Description |
---|---|
show.bs.dropdown |
This event fires immediately when the show instance method is called. |
shown.bs.dropdown |
This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). |
hide.bs.dropdown |
This event is fired immediately when the hide instance method has been called. |
hidden.bs.dropdown |
This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |