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 Figma Endringslogg

Egnet til:

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

Eksempel

TSX

<div className="min-h-32">
  <Dropdown>
    <Button as={Dropdown.Toggle}>Toggle</Button>
    <Dropdown.Menu>
      <Dropdown.Menu.GroupedList>
        <Dropdown.Menu.GroupedList.Heading>
          Systemer og oppslagsverk
        </Dropdown.Menu.GroupedList.Heading>
        <Dropdown.Menu.GroupedList.Item onClick={() => {}}>
          Gosys
        </Dropdown.Menu.GroupedList.Item>
        <Dropdown.Menu.GroupedList.Item as="a" href="https://nav.no">
          Infotrygd
        </Dropdown.Menu.GroupedList.Item>
      </Dropdown.Menu.GroupedList>
      <Dropdown.Menu.Divider />
      <Dropdown.Menu.List>
        <Dropdown.Menu.List.Item as={Link} href="https://nav.no">
          Kontakt
        </Dropdown.Menu.List.Item>
        <Dropdown.Menu.List.Item
          as={Link}
          href="https://nav.no"
          target="_blank"
        >
          Hjelp (åpner i en ny fane)
        </Dropdown.Menu.List.Item>
      </Dropdown.Menu.List>
    </Dropdown.Menu>
  </Dropdown>
</div>

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. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

Token	Fallback
--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

Informasjonskapsler på aksel.nav.no

Dropdown

Egnet til:

Eksempel

Retningslinjer

Props

Dropdown

onSelect?

closeOnSelect?

defaultOpen?

open?

onOpenChange?

Dropdown.Toggle

children

className?

data-color?

ref?

as?

Dropdown.Menu

children

onClose?

strategy?

placement?

className?

data-color?

ref?

Dropdown.Menu.List

children

className?

data-color?

ref?

Dropdown.Menu.List.Item

children

className?

data-color?

ref?

Dropdown.Menu.GroupedList

children

className?

data-color?

ref?

Dropdown.Menu.GroupedList.Heading

children

className?

data-color?

ref?

Dropdown.Menu.GroupedList.Item

children

className?

data-color?

ref?

as?

Dropdown.Divider

className?

data-color?

ref?

Tokens