[](https://www.npmjs.com/package/@anypoint-web-components/anypoint-menu-mixin)
[](https://travis-ci.com/anypoint-web-components/anypoint-menu-mixin)
[](https://www.webcomponents.org/element/anypoint-web-components/anypoint-menu-mixin)
# anypoint-menu-mixin
This is a port of [iron-menu-behavior](https://github.com/PolymerElements/iron-menu-behavior) that works with LitElement and ES6 classes, originally developed by the Polymer team.
## `MenuMixin` and `MenubarMixin`
`MenuMixin` and `MenubarMixin` implement accessible menu and menu bar mixins.
The mixins extends `MultiSelectableMixin` from `@anypoint-web-components/anypoint-selector` package.
## Usage
### Installation
```
npm install @anypoint-web-components/anypoint-menu-mixin --save
```
### In a LitElement template
```javascript
import { LitElement, html } from 'lit-element';
import { MenuMixin } from '@anypoint-web-components/anypoint-menu-mixin';
class SimpleMenu extends MenuMixin(LitElement) {
static get styles() {
return css`
:host > ::slotted(.selected) {
color: white;
background-color: #2196F3;
}
:host > ::slotted([disabled]) {
pointer-events: none;
}`;
}
render() {
return html``;
}
}
window.customElements.define('simple-menu', SimpleMenu);
```
Then, in your HTML:
```html
Item 0
Item 1
Item 2
Item 3
Item 4
```
## Accessibility
The mixin sets default role to the implementing element of "menu" and "menubar". The mixin can be used in different context. Then you may want to change the role to something else. If new role requires children to have "aria-selected" attribute then additionally set `useAriaSelected` property so the element will handle selection.
```html
```
## Development
```sh
git clone https://github.com/anypoint-web-components/anypoint-menu-mixin
cd anypoint-menu-mixin
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```