Overflow menu

npm install @entur/menu

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

Bruk

Overflow menu består av en ikonknapp som åpner en liste med handlinger. Overflow menu 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 skal disse være venstrejustert og være klart relatert til handlingene de brukes på.

Avhengig av hvor menyen 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 å vise handlingene som separate ikonknapper.

Bruk i tabell

I situasjoner der brukeren kan utføre en handlig på en hel rad i en tabell, eksempelvis å redigere innholdet eller slette rader, kan en OverflowMenu være nyttig å bruke på enden av raden.

Endret ikon i ikonknappen

Noen ganger kan andre ikoner enn de tre vertikale prikkene

Egendefinert knapp for å åpne menyen

Vi anbefaler å bruke komponenten som den er, men hvis du har situasjoner der det er bedre å bruke noe annet enn en ikonknapp for å åpne menyen, så er dette mulig med prop-en button.

Universell utforming

Hvis du bruker et ikon sammen med teksten i OverflowMenuItem, så husk å enten legge til en aria-label-beskrivelse eller aria-hidden på ikonet slik at skjermlesere ikke leser det opp som «image».

Hvis du endrer ikonet på OverflowMenu, pass på å sjekke om du bør aria-label også. Standardverdien for aria-label er «åpne velgmeny».

Komponenter

OverflowMenu

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

OverflowMenuItem

Representerer ett handlingsvalg i menyen. For handlinger som trigges av en funksjon kan man bruke callback-funksjonen onSelect og for lenker kan man bruke attributtet href.

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

OverflowMenuLink

Denne komponenten er helt lik OverflowMenuItem utenom at den kun støtter å bruke href-prop-en som handling.

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