Dropdown
Bootstrap 4 Dropdown with Material Design UI
Dropdown is an HTML component that allows the user to choose one value from a list. It is similar to the select box.
Bootstrap 4 Dropdown
Dropdown is toggleable, contextual overlay for displaying lists of links and more. It is made interactive with the included Bootstrap 4 dropdown JavaScript plugin.
Propeller Dropdown
Propeller Dropdown consists of Bootstrap 4 HTML structure with Propeller customized classes. Add .pmd-dropdown followed by .dropdown to apply material design standards to it.
Dropdown with Header
Create a dropdown with header by adding .dropdown-header class to the heading tags.
Dropdown With Divider
Add class .dropdown-divider to a <div> to create a divider in the dropdown to divides the sub menus.
Dropdown With Disabled Link
Add .disabled to make a link disabled.
Right Aligned Dropdown Menu
Add .dropdown-menu-right followed by .dropdown-menu to make the dropdown open from bottom-right.
Dropdown on Hover
After including the Javascript file, use the following code to initialize the function for Bootstrap Dropdown on Hover.
Add .dropdown-hover class followed by .dropdown-toggle to make the dropdown open on hover.
Dropup Variation
Dropdown can start from the top. Add .dropup class followed by .dropdown to make the dropdown open from top-right and top-left direction.
Dropleft Variation
To trigger a dropdown from the left of an element, add .dropleft followed by .pmd-dropdown class.
Dropright Variation
To trigger a dropdown from the right of an element, add .dropright followed by .pmd-dropdown class.
Dropdown with Icon
Dropdown with Icons can be used in tables and menus to show additional functionalities
Dropdown Form
Dropdown forms are used to add Registration or Login Forms as a dropdown menu in the main menu.
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 |
|---|---|---|
.pmd-dropdown |
Used to create a dropdown menu. | Required |
jQuery plugin
Call the jQuery plugin to initialize the dropdown while fetching the data dynamically.
Bootstrap 4 Methods
See here for more documentation on this.
| Method | Description |
|---|---|
$().dropdown('toggle') |
Toggles the dropdown menu of a given navbar or tabbed navigation. |
$().dropdown('update') |
Updates the position of an element’s dropdown. |
$().dropdown('dispose') |
Destroys an element’s dropdown. |
Bootstrap 4 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). |