details element continues to gain fans and get developers’ juices flowing. Scott Jehl recently tweeted:
Scott goes on to describe how creating disclosure widgets (controls that hide and show stuff) with resilience in mind is so much more difficult when not using
Like Scott says, the
GitHub’s use of details
Back in 2019, GitHub caused a flutter by going all-in on
<details> to make various interesting UI elements interactive without JS. Muan has co-created a number of components for Github where
<details> is used to, for example, open menus. They also shared notes from a talk on this subject. And Chris Coyier for one was impressed and intrigued.
Zach Leatherman’s details-utils
- animated open/close
- a quantum aspect ideal for responsive design – closed by default on narrow screens, open by default on wide
- and more
A note of caution
- Disclosure widgets by Adrian Roselli
- Details and summary are not…
- Details content showing up in find (Ctrl+F)
So far I’ve been cautious about using
details for more than simple cases but I’m starting to think the time may have come to take it further, possibly using Zach’s web component. A “hamburger” menu pattern might be a safe place to start… whereas I might not use it in situations where the “summary” (i.e. the toggle) needs to be more complex, for example on a subnavigation trigger which includes both a link and a button. When I do try it, it’d be great to employ some proper accessibility testing and get feedback.
Update 29 Sep 2022
It seems that using
<details> for interactive elements such as hamburger menus may not be such a good idea after all.
- A details element as a burger menu is not accessible on Cloud Four’s blog
- The details and summary elements, again by Scott O’Hara