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.
Eksempler
Ved å gruppere elementer i ActionMenu vil menyen bli mer oversiktlig og lettere å navigere. Dette vil være ekstra viktig for komplese menyer som inneholder ulike kontekster og funksjonalitet.
Du vil selv måtte legge til funksjonalitet for å lytte til tastatursnarveier.
Undermenyer lar deg forenkle komplekse grensesnitt og filter ved å flytte innholdet til en godt strukturert meny. Vi anbefaler maks to nivåer med undermenyer.
Med CheckboxItem og RadioItem i ActionMenu er det enkelt å lage et filter for tabeller eller andre komplekse grensesnitt.
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. Hvis Button fra Aksel brukes skal varianten "primary" aldri brukes.
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
Som hovedregel bør elementer grupperes med ActionMenu.Group.
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
Undermenyer kan være en god metode for å gruppere relaterte handlinger under samme meny, men øker kompleksiteten.
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
ActionMenu.Trigger
| Kommando | Interaksjon |
|---|---|
| ArrowDown | Åpner ActionMenu |
| Enter | Åpner ActionMenu |
| Space | Åpner ActionMenu |
ActionMenu.Content
| Kommando | Interaksjon |
|---|---|
| ArrowDown | Navigerer fremover i meny |
| ArrowUp | Navigerer bakover i meny |
| Home | Navigerer til første element i meny |
| End | Navigerer til siste element i meny |
| Esc | Lukker meny, fokuserer ActionMenu.Trigger |
ActionMenu.Item
| Kommando | Interaksjon |
|---|---|
| Enter | Velger element og lukker meny |
| Space | Velger element og lukker meny |
ActionMenu.CheckboxItem
| Kommando | Interaksjon |
|---|---|
| Enter | Velger checkbox item |
| Space | Velger checkbox item |
ActionMenu.RadioItem
| Kommando | Interaksjon |
|---|---|
| Enter | Velger radio item |
| Space | Velger radio item |
ActionMenu.SubTrigger
| Kommando | Interaksjon |
|---|---|
| ArrowRight | Åpner undermeny og fokuserer første element |
| Enter | Åpner undermeny og fokuserer første element |
| Space | Åpner undermeny og fokuserer første element |
ActionMenu.SubContent
| Kommando | Interaksjon |
|---|---|
| ArrowLeft | Lukker undermeny |
| ArrowRight | Lukker undermeny hvis den er plassert til venstre |
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
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
ActionMenu.Content
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ActionMenu.Group
className?
- Type:
string
label?
- Type:
string - Description:
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ActionMenu.Label
className?
- Type:
string
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
onSelect?
- Type:
((event: Event) => void)
disabled?
- Type:
boolean
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ActionMenu.CheckboxItem
shortcut?
- Type:
string - Description:
className?
- Type:
string
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
value?
- Type:
string
onValueChange?
- Type:
((value: string) => void)
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ActionMenu.RadioItem
className?
- Type:
string
onSelect?
- Type:
((event: Event) => void)
value
- Type:
string
disabled?
- Type:
boolean
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ActionMenu.Divider
className?
- Type:
string
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
disabled?
- Type:
boolean
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ActionMenu.SubContent
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description: