# <details-menu> element A menu that's opened with a <details> button. ## Installation ``` $ npm install @github/details-menu-element ``` ## Usage ```js import '@github/details-menu-element' ``` ```html

Robots

Hubot Bender BB-8

``` Use `data-menu-button` and `data-menu-button-text` to have button text updated on menu item activation. ```html

Preferred robot: None

Hubot Bender BB-8

``` 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. ```html

Preferred robot

Hubot Bender BB-8

``` ### Events - `details-menu-select` (cancelable) - fired on `` with `event.detail.relatedTarget` being the item to be selected. - `details-menu-selected` - fired on `` 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 [``][fragment] element. [fragment]: https://github.com/github/include-fragment-element/ ```html

Robots

Loading…

``` The `src` attribute value is copied to the `` the first time the `

` 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 `

` button, so the content may be loaded by the time the menu is opened. ## Browser support Browsers without native [custom element support][support] require a [polyfill][]. - Chrome - Firefox - Safari - Microsoft Edge [support]: https://caniuse.com/#feat=custom-elementsv1 [polyfill]: https://github.com/webcomponents/custom-elements ## Development ``` npm install npm test ``` ## License Distributed under the MIT license. See LICENSE for details.