Aksel

Meny

ActionMenu

Oppdatert
GithubYarnEndringslogg

Beta

Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.

Send innspill

Intro

ActionMenu er en nedtrekksmeny for handlinger og navigasjon. Ofte brukt for å samle relaterte handlinger og redusere unødvendig støy (visuell kompleksitet) i grensesnitt.

Egnet til:

  • Ekspertsystemer
  • Filter
  • Tabellhandlinger
  • Ekstra handlinger koblet til et element eller situasjon
  • Navigasjon mellom fagsystemer

Uegnet til:

  • Beskrive handlinger eller elementer (se Tooltip)
  • Primærhandlinger

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

ActionMenu kan være en nyttig komponent for å gjemme sekundære handlinger som ikke nødvendigvis trenger å være tilgjengelige for brukeren til enhver tid. Men som en konsekvens vil dette kreve at brukeren er bedre kjent med systemet og hvilke funksjonaliteter som er gjemt bak hva. Vær forsiktig med bruk av komponenten på åpne brukerflater og vær klar over at innholdet i komponenten ikke nødvendigvis vil bli oppdaget av alle.

ActionMenu.Trigger

Trigger skal alltid være koblet til en knapp. ActionMenu skal aldri være koblet til en primærhandling, som f.eks en primary button.

Knapp som åpner ActionMenu bør alltid ha ikon for å bedre indikere hvilken handling elementet utfører ved interaksjon. ChevronDownIcon vil i de fleste tilfeller være go-to ikon.

Gruppering

Se eksempel for Gruppering

Som hovedregel bør elementer grupperes med ActionMenu.Group.

  • Hvis CheckboxItem eller RadioItem blir brukt, skal disse alltid grupperes.
  • Du bestemmer selv om du vil bruke en visuell label med label-prop eller aria-label.
  • Hvis menyen inneholder flere grupperinger, bør disse skilles ved bruk av ActionMenu.Divider.

Unntaket er tilfeller der alle elementer i menyen har samme kontekst, men da skal ActionMenu.Trigger (handlingen som åpner menyen) klart formidle konteksten til handlingene.

Undermenyer

Se eksempel for undermenyer

Undermenyer kan være en god metode for å gruppere relaterte handlinger under samme meny, men øker kompleksiteten.

  • Bruk maks to nivå av undermenyer, men helst bare ett.
  • ActionMenu.Subtrigger skal beskrive hva undermenyen gjør.

Hver undermeny bør bare inneholde én kontekst. Dette gjør det lettere for hjelpemidler å navigere menyen effektivt.

Ikoner

Være forsiktig med å bruke ikoner som ligner på innebygde elementer som Submenu.Trigger, CheckboxItem eller RadioItem. Dette gjelder f.eks. Checkmark og Chevron.

Hvis et element i en gruppe inneholder ikon, bør alle andre også gjøre det. Eksempel for gruppering demonstrerer dette konseptet.

Shortcuts

Husk at nettlesere og OS ofte bruker en del snarveier allerede. Disse er dokumentert på sidene deres:

Du må selv implementere håndtering av snarveier for løsningen din. Det finnes uendelig med metoder for å håndtere dette, men vi legger ved en enkel implementasjon for React.

Tilgjengelighet

Interaksjon med tastatur

Komponenten implementerer standard Menu Button og Menu pattern.

Interaksjon med mus

Klikk utenfor ActionMenu lukker meny og fokuserer ActionMenu.Trigger. Selve menyen er i "modal"-modus når åpen, som betyr at man ikke vil kunne interagere med noen elementer utenfor før den er lukket.

Props

ActionMenu

open?

  • Type:
    boolean
  • Description:

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

rootElement?

  • Type:
    HTMLElement | null
  • Description:

ActionMenu.Trigger

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

ActionMenu.Content

align?

  • Type:
    "start" | "end"
  • Default:
    start

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.Group

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

label?

  • Type:
    string
  • Description:

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.Label

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.Item

as?

  • Type:
    React.ElementType
  • Description:

shortcut?

  • Type:
    string
  • Description:

variant?

  • Type:
    "danger"
  • Description:

icon?

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

onSelect?

  • Type:
    ((event: Event) => void)

disabled?

  • Type:
    boolean

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.CheckboxItem

shortcut?

  • Type:
    string
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

onSelect?

  • Type:
    ((event: Event) => void)

disabled?

  • Type:
    boolean

checked?

  • Type:
    CheckedState

onCheckedChange?

  • Type:
    ((checked: boolean) => void)

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.RadioGroup

label?

  • Type:
    string
  • Description:

aria-label?

  • Type:
    string
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

value?

  • Type:
    string

onValueChange?

  • Type:
    ((value: string) => void)

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.RadioItem

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

onSelect?

  • Type:
    ((event: Event) => void)

disabled?

  • Type:
    boolean

value

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.Divider

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.Sub

open?

  • Type:
    boolean
  • Description:

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

ActionMenu.SubTrigger

icon?

  • Type:
    ReactNode

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

disabled?

  • Type:
    boolean

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ActionMenu.SubContent

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description: