Overflow menu

npm install @entur/menu

@import '@entur/menu/dist/styles.css';

Komponenter

OverflowMenu

import { OverflowMenu } from '@entur/menu';

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

import { OverflowMenuItem } from '@entur/menu';

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

import { OverflowMenuLink } from '@entur/menu';

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.

Eksempler