Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

Dropdown

Dropdown er en generisk menykomponent som åpnes i en popover ved klikk.

Etterhvert som ActionMenu er ute av Beta, vil komponenten bli merket som "avviklet" og på et senere tidspunkt fjernet fra systemet. Vi anbefaler derfor å ta i bruk vår nye ActionMenu-komponent om mulig.

StabilOppdatert 9. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Bruk på interne flater
  • Arbeidsflater som brukes ofte
  • Kontekstmenyer
  • Liste med handlinger

Eksempel

Lenker

Retningslinjer

Denne komponenten egner seg best for arbeidsflater som brukes mye og ofte av brukerne. Dette er fordi den kan kreve tilvenning å forstå, og derfor egner seg dårlig på flater der brukerne bare er innom én eller to ganger, for eksempel søknadsdialoger.

Props

Dropdown

onSelect?

  • Type:
    ((element: MouseEvent<Element, MouseEvent>) => void)
  • Description:

    Handler called when an item is selected.

closeOnSelect?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Whether the Menu closes when a selection is made.

defaultOpen?

  • Type:
    boolean
  • Default:
    false

open?

  • Type:
    boolean
  • Description:

    Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.

onOpenChange?

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

    Change handler for open

Dropdown.Toggle

children

  • Type:
    ReactNode
  • Description:

    Button content

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

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Dropdown.Menu

children

  • Type:
    ReactNode
  • Description:

    Dropdown content

onClose?

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

    onClose callback

strategy?

  • Type:
    "fixed" | "absolute"
  • Default:
    ""absolute""
  • Description:

    Popover positionion strategy

placement?

  • Type:
    "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
  • Default:
    "null"

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

Dropdown.Menu.List

children

  • Type:
    ReactNode
  • Description:

    Menu list content

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLUListElement>
  • 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

Dropdown.Menu.List.Item

children

  • Type:
    ReactNode
  • Description:

    Menu item content

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

Dropdown.Menu.GroupedList

children

  • Type:
    ReactNode
  • Description:

    Menu list content

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDListElement>
  • 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

Dropdown.Menu.GroupedList.Heading

children

  • Type:
    ReactNode
  • Description:

    Heading

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDetailsElement>
  • 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

Dropdown.Menu.GroupedList.Item

children

  • Type:
    ReactNode
  • Description:

    Menu item content

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

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Dropdown.Divider

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLHRElement>
  • 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

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.

TokenFallback
--ac-dropdown-text--a-text-default
--ac-dropdown-item-text--a-text-action
--ac-dropdown-item-hover-bg--a-surface-action-subtle-hover
--ac-dropdown-item-hover-text--a-text-action-hover
--ac-dropdown-item-active-bg--a-surface-action-active
--ac-dropdown-item-active-text--a-text-on-active