Hamburger
Hamburgeren brukes til å vise hovedmenyer på små flater.
Vi har ikke flere hamburgere på samme side. Om du trenger å skjule annet innhold enn hovedmenyen kan du vurdere ExpandButton.
Tilgjengelighet
Det er viktig å hjelpe skjermlesere med å forstå at hamburgeren er en knapp som kommer til å påvirke et annet stykke innhold. Det er to elementer som må spille på lag her:
- Hamburgeren
- Menyen som skjules og vises
På hamburgeren må vi ha:
aria-controls
med en ID som peker på innholdet som styres av knappen (settes av deg påHamburger
)aria-expanded="false"
når lukket ogaria-expanded="true"
når åpen (styres medisOpen
)
På menyen som skjules og vises:
aria-labelledby
med en ID som peker tilbake på Hamburgerrole="group"
hidden
hvis innholdet er skjult
Hamburgerens typedefinisjon hjelper med deler av dette, men det er opp til deg å sørge for at menyen har riktige attributter.
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
id | Kreves for at menyen skal kunne sette `aria-labelledby`. | ingen | Påkrevd | string |
aria-controls | Hjelp skjermleseren forstå hva som blir styrt av hamburgeren. | ingen | Påkrevd | string |
aria-label | Gi en beskrivende tekst for skjermlesere. | "Hovedmeny" | Ikke påkrevd | string | undefined |
isOpen | Styrer utseende, tekst, og `aria-expanded`. | ingen | Påkrevd | boolean |
onClick | ingen | Påkrevd | (() => void) | ((evt: MouseEvent<Element, MouseEvent>) => void) | |
className | ingen | Ikke påkrevd | string | undefined | |
actionLabel | Vis en tekst før eller etter hamburgerikonet som varierer med åpnet og lukket tilstand. NB! Komponenten setter en standard `aria-label`. Skjermlesere vil kunne ignorere teksten i `actionLabel` og fremdeles annonsere knappens `aria-label`. Skjermleseren annonserer knappens tilstand basert på `aria-expanded`. Dersom du heller ønsker at knappens `actionLabel` skal leses opp må du sette en tom string som `aria-label`. | ingen | Ikke påkrevd | { open: string; close: string; animated?: boolean | undefined; position?: "before" | "after" | undefined; } | undefined |