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 →

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.