DropdownMenu

Kildekode på GitHub · Les som Markdown

DropdownMenu viser en liste med handlinger eller valg i en flytende meny. Bygget på Radix UI DropdownMenu med full tastaturnavigasjon og tilgjengelighet.

Importering

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from "@kilden/designsystem";

Grunnleggende bruk

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">Åpne meny</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuLabel>Min konto</DropdownMenuLabel>
  <DropdownMenuSeparator />
  <DropdownMenuItem>Profil</DropdownMenuItem>
  <DropdownMenuItem>Innstillinger</DropdownMenuItem>
  <DropdownMenuItem>Fakturering</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem>Logg ut</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

Med hurtigtaster

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">Rediger</Button>
</DropdownMenuTrigger>
<DropdownMenuContent style={{ minWidth: "10rem" }}>
  <DropdownMenuItem>
    Klipp ut
    <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    Kopier
    <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    Lim inn
    <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem>
    Velg alt
    <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>
  </DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

Med deaktiverte elementer

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button variant="outline">Handlinger</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuItem>Rediger</DropdownMenuItem>
  <DropdownMenuItem>Dupliser</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem disabled>Arkiver</DropdownMenuItem>
  <DropdownMenuItem disabled>Slett</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

Bruksanbefalinger

⋮ → Rediger / Dupliser / Slett

Bruk for kontekstuelle handlinger

DropdownMenu egner seg for handlinger knyttet til et spesifikt element — som en rad i en tabell, et kort eller en bruker.

Meny → Hjem / Om oss / Kontakt

Ikke bruk for navigasjon

For navigasjon mellom sider, bruk NavigationMenu eller vanlige lenker. DropdownMenu er for handlinger, ikke navigering.

Tilgjengelighet

Bruker role="menu" og role="menuitem" automatisk
Piltaster navigerer mellom elementer
Enter eller Space aktiverer det fokuserte elementet
Escape lukker menyen og returnerer fokus til trigger
Bokstavtaster hopper til matchende element (typeahead)
Deaktiverte elementer hoppes over ved tastaturnavigasjon

Props

DropdownMenu (rot)

Prop	Type	Default	Beskrivelse
`open`	`boolean`	—	Kontrollert åpen-tilstand
`onOpenChange`	`(open: boolean) => void`	—	Kalles når tilstand endres
`defaultOpen`	`boolean`	`false`	Standard åpen-tilstand

DropdownMenuContent

Prop	Type	Default	Beskrivelse
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Hvilken side av trigger
`sideOffset`	`number`	`4`	Avstand fra trigger i px
`align`	`"start" \| "center" \| "end"`	`"center"`	Justering langs siden

DropdownMenuItem

Prop	Type	Default	Beskrivelse
`disabled`	`boolean`	`false`	Deaktiver elementet
`inset`	`boolean`	`false`	Innrykk for ikon-justering