Navigation in details: summary neben Linkliste

[Robert B.]

Hallo zusammen,

ich habe aus dem Wiki die Idee eine zugängliche und responsive Navigation mit details zu realisieren. Der prinzipielle Code dafür ist:

<nav>
<details><summary>Navigation</summary>
<ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="…">Unterpunkt</a></li>
    <li><a href="…">Unterpunkt</a></li>
</ul>
</details>
</nav>

Auf schmalen Viewports lässt sich das direkt als „Hamburger-Menü“ umsetzen.

Für breite Viewports möchte ich gerne eine „Brotkrumen-Navigation“ haben, was bislang eine Hacks und magische Annahmen erfordert, die auf der verlinkten Seite zu sehen sind, aber mit Sicherheit noch eleganter möglich ist. Habt ihr Ideen?

Viele Grüße
Robert