Overflow menu

npm install @entur/menu

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

Varianter

OverflowMenu

Overflow menu består av en ikonknapp som åpner en liste med handlinger. Overflow menu består av komponentene OverflowMenu, OverflowMenuItem og OverflowMenuLink. OverflowMenuItem representerer et handlingsvalg i menyen. For handlinger som trigges av en funksjon kan man bruke callback-funksjonen onSelect og for lenker kan man bruke attributtet href. OverflowMenuLink er helt lik OverflowMenuItem utenom at den kun støtter å bruke href-prop-en som handling.

Eksempler

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 være mer forståelig for brukeren for å vise hva menyen gjør. Da kan du bruke prop-en buttonIcon for å sende med ditt ønskede ikon.

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.

Retningslinjer

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.

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».

Props

OverflowMenu

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

Denne komponenten har ingen props

OverflowMenuItem

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

Denne komponenten har ingen props

OverflowMenuLink

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

Denne komponenten har ingen props