Skip to content

GabiAxel/paper-dropdown-menu

Repository files navigation

This project is no longer maintained. Please use the official paper-dropdown-menu implementation at https://github.com/polymerelements/paper-dropdown-menu

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>

paper-dropdown-menu Horizontal and Vertical Alignment

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;
}

About

Dropdown wrapper for paper-menu

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages