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
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
.dropdown-divider to a <div> to create a divider in the dropdown to divides the sub menus.
Dropdown With Disabled Link
.disabled to make a link disabled.
Right Aligned Dropdown Menu
.dropdown-menu-right followed by
.dropdown-menu to make the dropdown open from bottom-right.
Dropdown on Hover
.dropdown-hover class followed by
.dropdown-toggle to make the dropdown open on hover.
Dropdown can start from the top. Add
.dropup class followed by
.dropdown to make the dropdown open from top-right and top-left direction.
To trigger a dropdown from the left of an element, add
.dropleft followed by
To trigger a dropdown from the right of an element, add
.dropright followed by
Dropdown forms are used to add Registration or Login Forms as a dropdown menu in the main menu.
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.||Required|
Call the jQuery plugin to initialize the dropdown while fetching the data dynamically.
Bootstrap 4 Methods
See here for more documentation on this.
||Toggles the dropdown menu of a given navbar or tabbed navigation.|
||Updates the position of an element’s dropdown.|
||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.
||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).|