# @npm-polymer/paper-menu-button

> A material design element that composes a trigger and a dropdown menu

Latest version **2.0.0** (published 2017-06-03) · http://polymer.github.io/LICENSE.txt license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @npm-polymer/paper-menu-button
pnpm add @npm-polymer/paper-menu-button
yarn add @npm-polymer/paper-menu-button
bun add @npm-polymer/paper-menu-button
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-06-03 |
| First published | 2017-06-03 |
| Weekly downloads | 0 |
| License | http://polymer.github.io/LICENSE.txt |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Maintainers | npm-polymer |
| Keywords | web-components, web-component, polymer, menu, button |

## Links

- npm: https://www.npmjs.com/package/@npm-polymer/paper-menu-button
- Repository: https://github.com/PolymerElements/paper-menu-button
- Issues: https://github.com/PolymerElements/paper-menu-button/issues
- npm.io page: https://npm.io/package/@npm-polymer/paper-menu-button

## Dependencies (7)

- [@npm-polymer/polymer](https://npm.io/package/@npm-polymer/polymer.md) 2.0.1
- [@npm-polymer/paper-styles](https://npm.io/package/@npm-polymer/paper-styles.md) 1.3.1
- [@npm-polymer/iron-dropdown](https://npm.io/package/@npm-polymer/iron-dropdown.md) 2.0.0
- [@npm-polymer/iron-behaviors](https://npm.io/package/@npm-polymer/iron-behaviors.md) 1.0.18
- [@npm-polymer/neon-animation](https://npm.io/package/@npm-polymer/neon-animation.md) 2.0.0
- [@npm-polymer/iron-fit-behavior](https://npm.io/package/@npm-polymer/iron-fit-behavior.md) 2.0.0
- [@npm-polymer/iron-a11y-keys-behavior](https://npm.io/package/@npm-polymer/iron-a11y-keys-behavior.md) 1.1.9

## Recent versions

- 2.0.0 (latest) — 2017-06-03

## README

[![Build status](https://travis-ci.org/PolymerElements/paper-menu-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-menu-button)

_[Demo and API docs](https://elements.polymer-project.org/elements/paper-menu-button)_


## <paper-menu-button>

Material design: [Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)

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

Example:

```html
<paper-menu-button>
  <paper-icon-button icon="menu" slot="dropdown-trigger"></paper-icon-button>
  <paper-listbox slot="dropdown-content">
    <paper-item>Share</paper-item>
    <paper-item>Settings</paper-item>
    <paper-item>Help</paper-item>
  </paper-listbox>
</paper-menu-button>
```

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

Defines these animations:
- &lt;paper-menu-grow-height-animation&gt;
- &lt;paper-menu-grow-width-animation&gt;
- &lt;paper-menu-shrink-height-animation&gt;
- &lt;paper-menu-shrink-width-animation&gt;

### Changes in 2.0
- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see example](demo/index.html))

---
_Source: https://npm.io/package/@npm-polymer/paper-menu-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._