A menu opened with <details>.

A menu that's opened with a <details> button.

$ npm install @github/details-menu-element Usage Script

Import as a module:

import '@github/details-menu-element'

With a script tag:

<script type="module" src="./node_modules/@github/details-menu-element/dist/index.js"> Markup

<details> <summary>Robots</summary> <details-menu role="menu"> <button type="button" role="menuitem">Hubot</button> <button type="button" role="menuitem">Bender</button> <button type="button" role="menuitem">BB-8</button> </details-menu> </details>

Use data-menu-button and data-menu-button-text to update the button's text on menu item activation.

<details> <summary>Preferred robot: <span data-menu-button>None</span></summary> <details-menu role="menu"> <button type="button" role="menuitem" data-menu-button-text>Hubot</button> <button type="button" role="menuitem" data-menu-button-text>Bender</button> <button type="button" role="menuitem" data-menu-button-text>BB-8</button> </details-menu> </details>

Use data-menu-button and data-menu-button-contents to update the button's HTML content on menu item activation.

<details> <summary>Preferred robot: <span data-menu-button>None</span></summary> <details-menu role="menu"> <button type="button" role="menuitem" data-menu-button-contents><img src="hubot.png"> Hubot</button> <button type="button" role="menuitem" data-menu-button-contents><img src="bender.png"> Bender</button> <button type="button" role="menuitem" data-menu-button-contents><img src="bb8.png"> BB-8</button> </details-menu> </details>

Use label[tabindex="0"][role=menuitemradio/menuitemcheckbox] when dealing with radio and checkbox inputs menu items. Check states of the input element and the label will be synchronized.

<details> <summary>Preferred robot</summary> <details-menu role="menu"> <label tabindex="0" role="menuitemradio"> <input type="radio" name="robot" value="Hubot"> Hubot </label> <label tabindex="0" role="menuitemradio"> <input type="radio" name="robot" value="Bender"> Bender </label> <label tabindex="0" role="menuitemradio"> <input type="radio" name="robot" value="BB-8"> BB-8 </label> </details-menu> </details> Events details-menu-select (cancelable) - fired on <details-menu> with event.detail.relatedTarget being the item to be selected. details-menu-selected - fired on <details-menu> with event.detail.relatedTarget being the item selected, after label is updated and menu is closed. Deferred loading

Menu content can be loaded from a server by embedding an <include-fragment> element.

<details> <summary>Robots</summary> <details-menu src="/robots" preload> <include-fragment>Loading…</include-fragment> </details-menu> </details>

The src attribute value is copied to the <include-fragment> the first time the <details> button is toggled open, which starts the server fetch.

If the preload attribute is present, the server fetch will begin on mouse hover over the <details> button, so the content may be loaded by the time the menu is opened.

Browsers without native custom element support require a polyfill.

npm install npm test License

Distributed under the MIT license. See LICENSE for details.