Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

ActionMenu

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

BetaOppdatert 9. mai 2025
GithubEndringslogg

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

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

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.

TSX
const shortcuts = {
  'ctrl+s': () => console.log('Save shortcut triggered'),
  'ctrl+z': () => console.log('Undo shortcut triggered'),
  'cmd+s': () => console.log('Save shortcut triggered on Mac'),
  'cmd+z': () => console.log('Undo shortcut triggered on Mac'),
  // Add more shortcuts
};


const handleKeyDown = (event: KeyboardEvent) => {
  const modifiers = [];
  if (event.ctrlKey) modifiers.push('Ctrl');
  if (event.metaKey) modifiers.push('Cmd');
  const key = [...modifiers, event.key].join('+').toLowerCase();
  
  if (shortcuts[key]) {
    event.preventDefault();
    shortcuts[key]();
  }
};


useEffect(() => {
  window.addEventListener('keydown', handleKeyDown);
  return () => {
    window.removeEventListener('keydown', handleKeyDown);
  };
}, []);

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:

    Whether the menu is open or not. Only needed if you want manually control state.

onOpenChange?

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

    Callback for when the menu is opened or closed.

rootElement?

  • Type:
    HTMLElement | null
  • Description:

    An optional container where the portaled content should be appended.

ActionMenu.Trigger

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.Content

align?

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.Group

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

label?

  • Type:
    string
  • Description:

    Adds a visual and accessible label to the group.

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.Label

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.Item

shortcut?

  • Type:
    string
  • Description:

    Shows connected shortcut-keys for the item. This is only a visual representation, you will have to implement the actual shortcut yourself.

variant?

  • Type:
    "danger"
  • Default:
    "null"
  • Description:

    Styles the item as a destructive action.

icon?

  • Type:
    ReactNode
  • Description:

    Adds an icon on the left side. The icon will always have aria-hidden.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

onSelect?

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

disabled?

  • Type:
    boolean

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

ActionMenu.CheckboxItem

shortcut?

  • Type:
    string
  • Description:

    Shows connected shortcut-keys for the item. This is only a visual representation, you will have to implement the actual shortcut yourself.

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:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.RadioGroup

label?

  • Type:
    string
  • Description:

    Adds a visual and accessible label to the group.

aria-label?

  • Type:
    string
  • Description:

    Adds an aria-label to the group. Defines a string value that labels the current element. @see aria-labelledby.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

value?

  • Type:
    string

onValueChange?

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

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

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:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.Divider

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.Sub

open?

  • Type:
    boolean
  • Description:

    Whether the sub-menu is open or not. Only needed if you want to manually control state.

onOpenChange?

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

    Callback for when the sub-menu is opened or closed.

ActionMenu.SubTrigger

icon?

  • Type:
    ReactNode

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

disabled?

  • Type:
    boolean

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

ActionMenu.SubContent

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs