Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Dropdown

Oppdatert 3. august 2023Interne flaterStabil
GithubYarnEndringslogg

    Intro

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

    Egnet til:

    • Bruk på interne flater
    • Kontekstmenyer
    • Liste med handlinger

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    NyheterRelevante lenker

    • Intern header
    • Table

    Props

    Dropdown

    onSelect? ((element: MouseEvent<Element, MouseEvent>) => void)
    Handler called when an item is selected.
    closeOnSelect?boolean
    Whether the Menu closes when a selection is made.
    defaultOpen?boolean
    open? boolean
    Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.

    Dropdown.Toggle

    as? React.ElementType
    OverridableComponent-api
    children ReactNode
    Button content
    className? string
    ref? Ref<HTMLButtonElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Toggle extends HTMLButtonElement

    Dropdown.Menu

    children ReactNode
    Dropdown content
    onClose? (() => void)
    onClose callback
    strategy?"fixed" | "absolute"
    Popover positionion strategy
    placement? "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Menu extends HTMLDivElement

    Dropdown.Menu.Item

    children ReactNode
    Content for description of the list item
    title? string
    Title for the list item
    icon? ReactNode
    className? string
    ref? Ref<HTMLLIElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Menu.Item extends HTMLLIElement

    Dropdown.Menu.List

    children ReactNode
    Menu list content
    className? string
    ref? Ref<HTMLUListElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Menu.List extends HTMLUListElement

    Dropdown.Menu.List.Item

    children ReactNode
    Menu item content
    className? string
    ref? Ref<HTMLButtonElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Menu.List.Item extends HTMLButtonElement

    Dropdown.Menu.GroupedList.Heading

    children ReactNode
    Heading
    className? string
    ref? Ref<HTMLDetailsElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Menu.GroupedList.Heading extends HTMLDetailsElement

    Dropdown.Menu.GroupedList.Item

    as? React.ElementType
    OverridableComponent-api
    children ReactNode
    Menu item content
    className? string
    ref? Ref<HTMLButtonElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Dropdown.Menu.GroupedList.Item extends HTMLButtonElement

    Tokens

    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-active-bg--a-surface-action-active
    --ac-dropdown-item-active-text--a-text-on-active
    Hva er dette?

    Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

    Relaterte komponenter

    • InternalHeader thumbnail
      InternalHeader
    • Table thumbnail
      Table

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack