I saw several posts about using `<details>` in this way, but none that fully implemented what I was looking for. So I implemented a site navbar that uses `<details>` in two ways: for dropdowns, and for a sidebar.

A working reference implementation can be found here [1]. Additionally, I ended up using a version of this on my personal site [2]. This works on stable versions of Chrome, Edge, Firefox, and Safari.

One thing to be careful of when using `<details>` in interesting ways: accessibility. At a minimum, I encourage folks to make sure that screen readers work as expected.

[1] https://codepen.io/devadvance/pen/bGBvvWv

[2] https://github.com/devadvance/devadvance.github.io/blob/mast...