Context menu
Secondary actions kept close to the selected object.
Dropdown menu
A focused list of actions anchored to a trigger.
npx shadcn@latest add @silicon-ui/dropdown-menuInstallation
With the shadcn CLI
npx shadcn@latest add @silicon-ui/dropdown-menuManually
Install the dependencies.
npm install @radix-ui/react-dropdown-menu lucide-react motionCopy these files into your project. Shared files are skipped if you already have them.
components/silicon-ui/dropdown-menu/dropdown-menu.tsxcomponents/silicon-ui/dropdown-menu/dropdown-menu.module.csscomponents/silicon-ui/lib/menu-highlight.tsxshared
Install the foundation once per app for the design and motion tokens:
npx shadcn@latest add @silicon-ui/silicon-foundation
Usage
Source codetsx
API reference
DropdownMenu
| Prop | Type | Default |
|---|---|---|
label*The trigger's text; when it names the current choice, a new label rises in and the trigger springs to its width. | string | — |
items*The actions, in order. | DropdownItem[] | — |
iconAn icon before the trigger's text. | ReactNode | — |
DropdownMenuRoot
Accepts the props of DropdownMenuProps.
DropdownMenuTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender your own trigger (an icon-only Button with an aria-label, an avatar and name) instead of the default one. | boolean | — |
Also accepts the props of ComponentPropsWithoutRef<typeof DropdownPrimitive.Trigger>.
DropdownMenuContent
| Prop | Type | Default |
|---|---|---|
sideWhich side of the trigger it opens on (default bottom). | "top" | "right" | "bottom" | "left" | "bottom" |
alignHow it lines up with the trigger (default end). | "start" | "center" | "end" | "end" |
Also accepts the props of ComponentPropsWithoutRef<typeof DropdownPrimitive.Content>.
DropdownMenuItem
| Prop | Type | Default |
|---|---|---|
iconA 16px icon before the label. | ReactNode | — |
shortcutA keyboard shortcut hint after the label, such as "⌘D". Shown only; bind the keys yourself. | string | — |
destructiveA destructive action (delete, remove): shown in the danger colour. | boolean | — |
Also accepts the props of ComponentPropsWithoutRef<typeof DropdownPrimitive.Item>.
DropdownMenuCheckboxItem
| Prop | Type | Default |
|---|---|---|
shortcutA keyboard shortcut hint after the label. | string | — |
Also accepts the props of ComponentPropsWithoutRef<typeof DropdownPrimitive.CheckboxItem>.
DropdownMenuRadioGroup
Accepts the props of MenuRadioGroupProps.
DropdownMenuRadioItem
| Prop | Type | Default |
|---|---|---|
iconA 16px icon or avatar before the label; the check shows at the end while this is the current choice. | ReactNode | — |
Also accepts the props of ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioItem>.
DropdownMenuLabel
Accepts the props of HTMLAttributes.
DropdownMenuSeparator
Accepts the props of HTMLAttributes.
DropdownMenuGroup
Accepts the props of HTMLAttributes.
DropdownMenuSub
Accepts the props of DropdownMenuSubProps.
DropdownMenuSubTrigger
| Prop | Type | Default |
|---|---|---|
iconA 16px icon before the label. | ReactNode | — |
Also accepts the props of ComponentPropsWithoutRef<typeof DropdownPrimitive.SubTrigger>.
DropdownMenuSubContent
Accepts the props of PopperContentProps, MenuSubContentProps, MenuContentImplProps.