Menybytter (Menu Toggle)

<adb-menu-toggle> er hamburgeren/lukk-knappen som åpner og lukker navigasjonsmenyen. Den viser en meny-tekst og ikon i lukket tilstand, og «Lukk» med kryss-ikon i åpen tilstand. Komponenten setter aria-expanded og sender en adb-menu-toggle-hendelse — foreldreelementet (f.eks. <adb-site-header>) er ansvarlig for å vise/skjule selve menyen og oppdatere open-attributtet tilbake.

Lukket (standard)

Åpen

<!-- Lukket -->
<adb-menu-toggle label-open="Meny" label-close="Lukk"></adb-menu-toggle>

<!-- Åpen -->
<adb-menu-toggle open label-open="Meny" label-close="Lukk"></adb-menu-toggle>

Tilstander side om side

Lukket

Åpen

I header-kontekst

Slik ser den ut i en header

Artsdatabanken

Flerspråklig støtte

Tekstene label-open og label-close kan settes fritt for å støtte bokmål, nynorsk og engelsk:

<!-- Nynorsk -->
<adb-menu-toggle label-open="Meny" label-close="Lukk"></adb-menu-toggle>

<!-- Engelsk -->
<adb-menu-toggle label-open="Menu" label-close="Close"></adb-menu-toggle>

API

Attributter / Properties

Attributt	Property	Type	Standard	Beskrivelse
open	open	boolean	false	Om menyen er åpen. Reflekteres til attributt.
label-open	labelOpen	string	"Meny"	Knappetekst når menyen er lukket
label-close	labelClose	string	"Lukk"	Knappetekst når menyen er åpen
controls	controls	string	—	ID til elementet knappen kontrollerer (aria-controls)

Hendelser

Hendelse	Detail	Beskrivelse
adb-menu-toggle	{ open: boolean }	Sendes ved klikk. open er den nye tilstanden.

CSS Parts

Part	Beskrivelse
button	Det indre <button>-elementet

// Lytt på hendelsen
document.querySelector('adb-menu-toggle').addEventListener('adb-menu-toggle', (e) => {
  console.log('Meny åpen:', e.detail.open);
});

---

Universell utforming (WCAG 2.1 AA)

Kriterium	Nivå	Oppfylt	Merknad
1.3.1 Informasjon og relasjoner	A	✅	Nativt <button>-element med semantisk rolle
2.1.1 Tastatur	A	✅	Aktiveres med Enter og Space
2.4.7 Fokus synlig	AA	✅	4 px fokusring ved :focus-visible
4.1.2 Navn, rolle, verdi	A	✅	aria-expanded oppdateres automatisk; aria-controls kobler knapp til menyen