This project is no longer maintained. Please use the official paper-dropdown-menu implementation at https://github.com/polymerelements/paper-dropdown-menu
An element used for wrapping a paper-menu
with an overlay, making it a dropdown.
Open the dropdown by calling the element's open
method. The dropdown will be closed
when clicking anywhere outside of it and when selecting an item from the menu.
It can also be programmatically closed by calling the close
method.
Example:
<paper-dropdown-menu>
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu>
</paper-dropdown-menu>
document.querySelector('paper-dropdown-menu').open();
You may add elements other than paper-menu
as the content root. In the following example,
a paper-material
is used to wrap the paper-menu
:
<paper-dropdown-menu>
<paper-material>
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu>
</paper-material>
</paper-dropdown-menu>
By default the dropdown is aligned to top left. Use CSS that targets the inner paper-dropdown-overlay
element to change the alignment using the top
, bottom
, left
and right
attributes.
Example:
/* Aligns the dropdown to bottom right */
paper-dropdown-menu paper-dropdown-overlay {
top: auto;
bottom: 0;
left: auto;
right: 0;
}