Collapsible nav menus with pure html

Looking for a way to have a drop-down style menu but also want to remain a card carrying member of the

All you need to do is surround your would-be menu with <details> and insert <summary>Menu</summary> as the first child. Easy.

HTML
<details open1>
<summary>Menu</summary>
<a href="/">Home</a>
<a href="/blog">Blog</a>
<a href="/about">About</a>
</details>
Result
Menu click here  Home Blog About

It may not be perfect, and in Safari it seems to render as a full width block, but if you don’t care about brutalist web design, you could always throw in some CSS to make it look more like you’d prefer.


  1. Adding open to the element makes it “open” on load.

Top of page