/paper-dropdown-menu

A Material Design browser select element

Primary LanguageHTML

Build status

Demo and API docs

##<paper-dropdown-menu>

Material design: Dropdown menus

paper-dropdown-menu is similar to a native browser select element. paper-dropdown-menu works with selectable content. The currently selected item is displayed in the control. If no item is selected, the label is displayed instead.

The child element with the class dropdown-content will be used as the dropdown menu. It could be a paper-listbox or element that triggers iron-select when selecting its children.

Example:

<paper-dropdown-menu label="Your favourite pastry">
  <paper-listbox class="dropdown-content">
    <paper-item>Croissant</paper-item>
    <paper-item>Donut</paper-item>
    <paper-item>Financier</paper-item>
    <paper-item>Madeleine</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

This example renders a dropdown menu with 4 options.

Similarly to using iron-select, iron-deselect events will cause the current selection of the paper-dropdown-menu to be cleared.

Styling

The following custom properties and mixins are also available for styling:

Custom property Description Default
--paper-dropdown-menu A mixin that is applied to the element host {}
--paper-dropdown-menu-disabled A mixin that is applied to the element host when disabled {}
--paper-dropdown-menu-ripple A mixin that is applied to the internal ripple {}
--paper-dropdown-menu-button A mixin that is applied to the internal menu button {}
--paper-dropdown-menu-input A mixin that is applied to the internal paper input {}
--paper-dropdown-menu-icon A mixin that is applied to the internal icon {}

You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.