https://github.com/polymerelements/iron-menu-behavior

Accessible menu behavior
https://github.com/polymerelements/iron-menu-behavior

Last synced: about 1 year ago
JSON representation

Accessible menu behavior

• Host: GitHub
• URL: https://github.com/polymerelements/iron-menu-behavior
• Owner: PolymerElements
• Created: 2015-04-24T23:31:47.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2025-01-29T20:28:37.000Z (over 1 year ago)
• Last Synced: 2025-04-03T22:08:19.838Z (about 1 year ago)
• Language: HTML
• Size: 389 KB
• Stars: 18
• Watchers: 16
• Forks: 28
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-menu-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-menu-behavior)

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

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-menu-behavior)

## `IronMenuBehavior`, `IronMenubarBehavior`

`IronMenuBehavior` and `IronMenubarBehavior` implement accessible menu and

menubar behaviors.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-menu-behavior),

  [Demo](https://www.webcomponents.org/element/@polymer/iron-menu-behavior/demo/demo/index.html).

## Usage

### Installation

```

npm install --save @polymer/iron-menu-behavior

```

### In a Polymer 3 element

```js

import {PolymerElement} from '@polymer/polymer/polymer-element.js';

import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';

import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import {IronMenuBehavior} from '@polymer/iron-menu-behavior/iron-menu-behavior.js';

class SimpleMenu extends mixinBehaviors(IronMenuBehavior, PolymerElement) {

  static get template() {

    return html`

      

        :host > ::slotted(*) {

          display: block;

        }

        :host > ::slotted(.iron-selected) {

          color: white;

          background-color: var(--google-blue-500);

        }

      

      

    `;

  }

}

customElements.define('simple-menu', SimpleMenu);

```

Then, in your HTML:

```html

simple-menu .iron-selected {

  background-color: blue;

  color: white;

}

  
Item 0

  
Item 1

  
Item 2 (disabled)


```

## 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/iron-menu-behavior

cd iron-menu-behavior

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

```