[](https://www.npmjs.com/package/@polymer/paper-menu-button)
[](https://travis-ci.org/PolymerElements/paper-menu-button)
[](https://webcomponents.org/element/@polymer/paper-menu-button)
## <paper-menu-button>
`paper-menu-button` allows one to compose a designated "trigger" element with
another element that represents "content", to create a dropdown menu that
displays the "content" when the "trigger" is clicked.
The child element assigned to the `dropdown-trigger` slot will be used as the
"trigger" element. The child element assigned to the `dropdown-content` slot will be
used as the "content" element.
The `paper-menu-button` is sensitive to its content's `iron-select` events. If
the "content" element triggers an `iron-select` event, the `paper-menu-button`
will close automatically.
### Styling
The following custom properties and mixins are also available for styling:
| Custom property | Description | Default |
| --- | --- | --- |
| `--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `--primary-background-color` |
| `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}` |
| `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}` |
| `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}` |
| `--paper-menu-button-content` | Mixin applied to the paper-menu-button content | `{}` |
## paper-menu-button-animations.js
Defines these animations:
- <paper-menu-grow-height-animation>
- <paper-menu-grow-width-animation>
- <paper-menu-shrink-height-animation>
- <paper-menu-shrink-width-animation>
See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-menu-button),
[Demo](https://www.webcomponents.org/element/@polymer/paper-menu-button/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/paper-menu-button
```
### In an html file
```html
Share
Settings
Help
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-menu-button/paper-menu-button.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
Share
Settings
Help
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/paper-menu-button
cd paper-menu-button
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```