Using the <details> element to create modals and menus

The folks over at GitHub have been leveraging the <details> element to create modals and menus:

<details class=“dropdown”>
  <summary class=“btn” aria-haspopup=“menu”>…</summary>
  <ul class=“dropdown-content”>
    <li><a href="/muan">profile</a></li>
    …
  </ul>
</details>

Very clever, as <details> trumps the <modal> element in many ways:

  • Semantic
  • Accessible
  • No JavaScript

Next to that, they’ve also released a few custom elements that make use of this technique: a <details-menu> and a <details-dialog> custom element.

Details on <details>
Details on <details> (slides)
<details-menu> element →
<details-dialog> element →

HTML 5.2: The <dialog> Element

HTML 5.2 has introduced a new <dialog> element to show modal dialog boxes. Here’s a small demo by @bdc (forked version by me, including polyfill):

Already available in Chrome; a polyfill is available for other/older browsers.

Meet the New Dialog Element →
Polyfill for the HTML <dialog> element →

Siderant: I cannot help it, but my inner geek has issues with the language used to control the dialog.

The attribute to indicate whether a modal is open/visible/shown or not is named open, so I’m taking that as the baseline.

Now, say you want to open a modal via JavaScript you don’t call modal.open(), but you have have to call modal.showModal(). Why not open (like the attribute) but show as the verb? And why the Modal suffix?

And now comes the even more inconsistent part: to close it, you don’t call modal.hideModal() (which is the exact opposite of modal.showModal()) nor modal.closeModal(), but modal.close().

Weird … 🤔