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 with Icon
Dropdown with Icons can be used in tables and menus to show additional functionalities
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).|