LifeDS

Components

Component

Dropdown Menu

Two dropdown primitives: DropdownMenu (contextual actions) and Select (form value selection).

DropdownMenuRoot · Trigger · Content · Item · Label · Separator · Shortcut
DropdownMenuCheckboxItemchecked · onCheckedChange
DropdownMenuRadioGroupvalue · onValueChange
DropdownMenuSubSubTrigger · SubContent
DropdownMenuItemvariant: default · destructive · inset · disabled
SelectRoot · Trigger · Content · Item · Label · Separator · Group
Playground

DropdownMenu — basic

default trigger
outline trigger
icon trigger — kebab menu

Sizes

sm

h-7 · 28px

default

h-8 · 32px

xl

h-11 · 44px

Icon button sizes

sm

28px

default

32px

xl

44px

DropdownMenu — label, groups & shortcuts

account menu pattern

DropdownMenu — checkbox items

toggle columns / visibility
with icons

DropdownMenu — radio items

single selection
with icons

DropdownMenu — submenu

nested navigation — 2 levels deep

DropdownMenu — avatar trigger

ghost icon trigger wrapping an Avatar

RTL support

dir="rtl" — content flips with the menu

Select — basic

default size (h-8)
size="sm" (h-7)
size="xl" (h-11) — matches button xl
disabled

Select — groups & labels

grouped options

Tokens used

10 semantic tokens consumed by this component.

--popoverPopover
bg-popover
--popover-foregroundPopover Foreground
text-popover-foreground
--accentAccent
bg-accenttext-accentborder-accent
--accent-foregroundAccent Foreground
text-accent-foreground
--foregroundForeground
text-foreground
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder
--inputInput
bg-inputborder-input
--ringRing
ring-ringring
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive