# 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

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

Bottom Left Direction

Bottom Right Direction

Top Left Direction

Top Right Direction

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

Hover with header

Hover with divider

Hover with disabled menu items

## 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

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