Port of iron-selector that works with ES6 classes. Manages a list of elements that can be selected.

Usage no npm install needed!

<script type="module">
  import anypointWebComponentsAnypointMenuMixin from 'https://cdn.skypack.dev/@anypoint-web-components/anypoint-menu-mixin';


Published on NPM

Build Status

Published on webcomponents.org


This is a port of 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.



npm install @anypoint-web-components/anypoint-menu-mixin --save

In a LitElement template

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`<slot></slot>`;
window.customElements.define('simple-menu', SimpleMenu);

Then, in your HTML:

    <script type="module" src="./simple-menu.js"></script>
    /* Overrides component's internal styling */
    simple-menu .selected {
      background-color: blue;
      color: white;
      <div>Item 0</div>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      document.querySelector('simple-menu').onselect = (e) => {


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.

<tabs-implementation role="tablist" useariaselected>
  <button role="tab">Tab #1</button>
  <button role="tab">Tab #2</button>
  <button role="tab">Tab #3</button>


git clone https://github.com/anypoint-web-components/anypoint-menu-mixin
cd anypoint-menu-mixin
npm install

Running the demo locally

npm start

Running the tests

npm test