Overflow menu
Overflow menu består av en ikonknapp for meny som utløser en liste over handlinger når man klikker på den.
Komponenter
OverflowMenu
Denne komponenten støtter keyboard-events, som kan sees her: https://reacttraining.com/reach-ui/menu-button#keyboard-accessibility
Obs angående button
-prop:
Generelt sett er dette en meny som skal ligge bak en IconButton
med VerticalDotsIcon
,
men man også sende inn sin egen knapp om det skulle være ønskelig å endre denne.
Denne knappen må støtte en as
prop for å riktig bli integrert inn i menyen.
Alle knappene i designsystemet støtter denne propen
OverflowMenuItem
Pass på bruk av onClick på denne (og OverflowMenuLink
), da den eventen potensielt ikke vil skje i den rekkefølgen man forventer.
Om du bruker ikoner, husk og wrap den i en tag som er aria-hidden
.
Les mer om det her: https://reacttraining.com/reach-ui/menu-button#events
OverflowMenuLink
På grunn av den semantiske forskjellen mellom knapper og linker,
så krever denne komponenten en split mellom en tradisjonell OverflowMenuItem
og OverflowMenuLink
.
Retningslinjer for bruk
Overflow menu består av en ikonknapp for meny som utløser en liste over handlinger når man klikker på den. Brukes for eksempel som en kontekstuell meny i en tabellrad der flere handlinger er tilgjengelig for brukeren. Teksten på menyelementer bør være kort og direkte slik at brukerne raskt kan bestemme seg for en handling. Ikoner kan også hjelpe brukeren å forstå konteksten raskere. Hvis du skal bruke ikoner i menyelementene, må disse være venstrejustert og oppleves relevant for de handlingene de brukes til. Avhengig av hvor den vises i brukergrensesnittet, kan en overflow menu vises i retning venstre eller høyre slik at den alltid er synlig for brukeren. En overflow menu bør ha minst 3 menyelementer. Hvis den ikke har det, vurder heller å vis handlingene ved å bruke Icon button.