Hopp til innhold
Aksel

Komponenter

ActionMenu

ActionMenu er en nedtrekksmeny for handlinger. Ofte brukt for å samle relaterte handlinger og redusere visuell kompleksitet i grensesnitt.

StabilOppdatert 27. mars 2026
GithubEndringslogg

Egnet til:

  • Ekspertsystemer
  • Filter
  • Handlingsmeny

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 trenger å være tilgjengelige for brukeren til enhver tid. Men som en konsekvens vil dette kreve at brukeren er godt kjent med systemet. 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, men ikke en primary button.

Knappen som åpner en ActionMenu skal ha et ikon som viser at det er en meny. Hvis knappen har tekst er ChevronDownIcon godt egnet, mens MenuElipsisVertical kan brukes uten tekst.

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-propen 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åer med undermenyer, men helst bare ett.
  • ActionMenu.Subtrigger skal beskrive hva undermenyen gjør.

Ikoner

Ikke bruk ikoner som ligner på innebygde elementer som Submenu.Trigger, CheckboxItem og 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.

Tastatursnarveier

Husk at nettlesere, OS og hjelpeteknologi har en del innebygde tastatursnarveier.

Du må selv implementere håndtering av tastatursnarveier for løsningen din. Det finnes uendelig med metoder for å håndtere dette, for eksempel TanStack Hotkeys.

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

ref?

  • Type:
    Ref<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

ref?

  • Type:
    Ref<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

label?

  • Type:
    string
  • Description:

    Adds a visual and accessible label to the group.

ref?

  • Type:
    Ref<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

ref?

  • Type:
    Ref<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"
  • Description:

    Styles the item as a destructive action.

icon?

  • Type:
    ReactNode
  • Description:

    Adds an icon on the left side. For right side position use iconPosition. The icon will always have aria-hidden.

iconPosition?

  • Type:
    "left" | "right"
  • Default:
    left
  • Description:

    Position of icon.

className?

  • Type:
    string

onSelect?

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

disabled?

  • Type:
    boolean

ref?

  • Type:
    Ref<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

onSelect?

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

disabled?

  • Type:
    boolean

checked?

  • Type:
    CheckedState

onCheckedChange?

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

ref?

  • Type:
    Ref<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

value?

  • Type:
    string

onValueChange?

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

ref?

  • Type:
    Ref<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

onSelect?

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

disabled?

  • Type:
    boolean

value

  • Type:
    string

ref?

  • Type:
    Ref<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

ref?

  • Type:
    Ref<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

iconPosition?

  • Type:
    "left" | "right"
  • Default:
    left
  • Description:

    Position of icon.

className?

  • Type:
    string

disabled?

  • Type:
    boolean

ref?

  • Type:
    Ref<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

ref?

  • Type:
    Ref<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