A menu that's opened with a <details> button.
$ npm install @github/details-menu-element Import as a module:
import'@github/details-menu-element'With a script tag:
<scripttype="module" src="./node_modules/@github/details-menu-element/dist/index.js"><details><summary>Robots</summary><details-menurole="menu"><buttontype="button" role="menuitem">Hubot</button><buttontype="button" role="menuitem">Bender</button><buttontype="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: <spandata-menu-button>None</span></summary><details-menurole="menu"><buttontype="button" role="menuitem" data-menu-button-text>Hubot</button><buttontype="button" role="menuitem" data-menu-button-text>Bender</button><buttontype="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: <spandata-menu-button>None</span></summary><details-menurole="menu"><buttontype="button" role="menuitem" data-menu-button-contents><imgsrc="hubot.png"> Hubot</button><buttontype="button" role="menuitem" data-menu-button-contents><imgsrc="bender.png"> Bender</button><buttontype="button" role="menuitem" data-menu-button-contents><imgsrc="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-menurole="menu"><labeltabindex="0" role="menuitemradio"><inputtype="radio" name="robot" value="Hubot"> Hubot </label><labeltabindex="0" role="menuitemradio"><inputtype="radio" name="robot" value="Bender"> Bender </label><labeltabindex="0" role="menuitemradio"><inputtype="radio" name="robot" value="BB-8"> BB-8 </label></details-menu></details>details-menu-select(cancelable) - fired on<details-menu>withevent.detail.relatedTargetbeing the item to be selected.details-menu-selected- fired on<details-menu>withevent.detail.relatedTargetbeing the item selected, after label is updated and menu is closed.
Menu content can be loaded from a server by embedding an <include-fragment> element.
<details><summary>Robots</summary><details-menusrc="/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.
- Chrome
- Firefox
- Safari
- Microsoft Edge
npm install npm test Distributed under the MIT license. See LICENSE for details.