<details-menu> element
A menu that's opened with a <details> button.
Installation
$ npm install @github/details-menu-element
Usage
import '@github/details-menu-element'<details>
<summary>Robots</summary>
<details-menu>
<ul>
<li><button type="button" role="menuitem">Hubot</button></li>
<li><button type="button" role="menuitem">Bender</button></li>
<li><button type="button" role="menuitem">BB-8</button></li>
</ul>
</details-menu>
</details>Use data-menu-button and data-menu-button-text to have button text updated on menu item activation.
<details>
<summary>Preferred robot: <span data-menu-button>None</span></summary>
<details-menu>
<ul>
<li><button type="button" role="menuitem" data-menu-button-text>Hubot</button></li>
<li><button type="button" role="menuitem" data-menu-button-text>Bender</button></li>
<li><button type="button" role="menuitem" data-menu-button-text>BB-8</button></li>
</ul>
</details-menu>
</details>Events
details-menu-select- An item is to be select (cancelable).details-menu-selected- An item is selected, label updated, menu 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">
<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.
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.