Disclosure Toggle Menu Using HTML Details Element

Preview:

Description:

A pure JavaScript library used to create accessible disclosure toggle menus using HTML Details element.

Works with modern browsers which support Custom Element.

How to use it:

Install & download.

# NPM
$ npm install $ npm install @github/details-menu-element --save

Load the umd version of the details-menu-element in the document.

<script type="text/javascript" src="https://unpkg.com/@github/[email protected]"></script>

Create a basic toggle menu from a details element. In this example, the toggle menu will auto update the summary data using the data-menu-button and data-menu-button-text attributes:

<details>
  <summary>JavaScript: <span data-menu-button>Frameworks</span></summary>
  <details-menu>
    <ul>
      <li><button type="button" role="menuitem" data-menu-button-text>Angular</button></li>
      <li><button type="button" role="menuitem" data-menu-button-text>React</button></li>
      <li><button type="button" role="menuitem" data-menu-button-text>Vue.js</button></li>
    </ul>
  </details-menu>
</details>

Radio & checkbox inputs are supported as well.

<details>
  <summary>JavaScript: <span data-menu-button>Frameworks</span></summary>
  <details-menu>
    <ul>
      <li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Angular</label></li>
      <li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> React</label></li>
      <li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Vue.js</label></li>
    </ul>
  </details-menu>
</details>
<details>
  <summary>JavaScript:</summary>
  <details-menu>
    <ul>
      <li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Angular</label></li>
      <li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> React</label></li>
      <li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Vue.js</label></li>
    </ul>
  </details-menu>
</details>

Event handlers.

// when a menu item is selected
document.addEventListener('details-menu-selected', e => console.log(e))
// when a menu item is to be select
document.addEventListener('details-menu-select', e => console.log(e))