{"repo":"github/details-menu-element","free":true,"listed":false,"github":"https://github.com/github/details-menu-element","clone":"git clone https://github.com/github/details-menu-element.git","description":"A menu opened with <details>.","language":"JavaScript","stars":611,"topics":["web-components","custom-elements"],"license":"MIT","category":"ui-components","readme_excerpt":"&lt;details-menu&gt; element A menu that's opened with a &lt;details button. Installation Usage Script Import as a module: With a script tag: Markup Use data-menu-button and data-menu-button-text to update the button's text on menu item activation. Use data-menu-button and data-menu-button-contents to update the button's HTML content on menu item activation. 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. 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/ 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 Developm","default_branch":null,"files":null,"tree":[],"storefront":"/r/github","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/github/details-menu-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}