Hamburger Menu HTML

Der Button öffnet. Die Navigation bleibt Navigation.

Der Menüschalter ist ein <button>. aria-expanded beschreibt seinen Zustand, aria-controls verweist auf den nav-Bereich. Ist er geschlossen, entfernt hidden die Links aus Anzeige und Fokusweg.

Zustandsleitung

Ein Zustand. Zwei getrennte Bauteile.

Steuerung

aria-expanded="false"aria-controls="hamburger-demo-nav"

Navigation

<nav id="hamburger-demo-nav" hidden>

Links verborgen

Fokusweg

  1. 1 · Menü

Gemeldeter ZustandEingeklappt

Echter Button · normale Links im nav · hidden und aria-expanded synchron