DEV Community

loading...

Progressively enhanced menu buttons with details/summary

marcush profile image Marcus Herrmann Originally published at marcus.io ・2 min read

While researching for the accessible approach to menu buttons in Vue this week, I couldn't help myself but to open my browser's dev tools on every "menu button" sighting I came across, curious how the respective team or developer implemented it.

The concept of a "menu" of any kind is often found in profile dropdows. Some websites decide to not use a semantic menu at all, "just" showing a div or list on click and releasing its content into the tab order, (dev.to, for example).

And there is GitHub's approach that uses the details and summary element for a menu, making the whole construct work even without JavaScript (in nearly every browser). Here's the birds-eye view of their approach:

<details>
    <summary>Click me</summary>
    <details-menu role="menu"> <!-- a custom element -->
        <li><button type="button" role="menuitem">Agnetha</button></li>
        <li><button type="button" role="menuitem">Björn</button></li>
        <li><button type="button" role="menuitem">Benny</button></li>
        <li><button type="button" role="menuitem">Anni-Frid</button></li>
    </details-menu>
<details>

I won't try to explain it any further - because:

Discussion

pic
Editor guide