Dropdown

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.

Dropdown trigger

Action Another action Something else here

Propeller Dropdown

Propeller Dropdown consists of Bootstrap HTML structure with Propeller customized classes. Add .pmd-dropdown followed by .dropdown to apply material design standards to it.

Propeller Dropdown

Action Another action Something else here

Dropdown with Header

Create a dropdown with header by adding .dropdown-header class to the heading tags.

Dropdown with Header

Dropdown header

Action Another action Something else here

Dropdown With Divider

Add class .dropdown-divider to a <div> to create a divider in the dropdown to divides the sub menus.

Dropdown With Divider

Action Another action Something else here

Separated link

Dropdown With Disabled Link

Add .disabled to make a link disabled.

Dropdown with disabled link

Action Another action Something else here

Separated link

Right Aligned Dropdown Menu

Add .dropdown-menu-right followed by .dropdown-menu to make the dropdown open from bottom-right.

Bottom Right Dorpdown

Action Another action Something else here

Separated link

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.

Top Left Direction

Action Another action Something else here

Separated link

Top Right Direction

Action Another action Something else here

Separated link

Dropleft Variation

To trigger a dropdown from the left of an element, add .dropleft followed by .pmd-dropdown class.

Dropleft

Dropdown header

Action Another action Something else here

Toggle Dropleft

Dropdown header

Action Another action Something else here

Split dropleft

Dropright Variation

To trigger a dropdown from the right of an element, add .dropright followed by .pmd-dropdown class.

Dropright

Dropdown header

Action Another action Something else here

Split dropright Toggle Dropright

Dropdown header

Action Another action Something else here

Dropdown Form

Dropdown forms are used to add Registration or Login Forms as a dropdown menu in the main menu.

Dropdown with Form

Sign In Below

perm_identity

Username

https

Password

Remember Me

Forgot Password

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 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 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).