A dropdown menu triggered by a button, icon, or avatar. Supports configurable alignment and RTL.
Loading demo: dropdown-real-world
npx sdaia-ui@latest add dropdown
import { Dropdown } from "@/components/ui/dropdown"<Dropdown type="button" />Use surface="glass" to enable Glass Effect.
Loading demo: dropdown-glass
Dropdown triggered by a standard button.
Loading demo: dropdown-button
Dropdown triggered by an icon button.
Loading demo: dropdown-icon
Dropdown triggered by a user avatar.
Loading demo: dropdown-avatar
Dropdown menu aligned to the start, center, or end of the trigger.
Loading demo: dropdown-alignment
Props for the Dropdown component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'button' | 'icon' | 'avatar' | 'button' | optional |
alignment | 'start' | 'center' | 'end' | 'end' | optional |
label | string | 'Button' | optional |
variant | 'neutral' | 'primary' | 'secondary-solid' | 'secondary-outline' | 'subtle' |... | 'primary' | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
avatarSrc | string | - | optional |
avatarAlt | string | - | optional |
header | DropdownListHeaderProps | - | optional |
items | DropdownItem[] | [] | optional |
disabled | boolean | false | optional |
open | boolean | - | optional |
defaultOpen | boolean | false | optional |
onOpenChange | (open: boolean) => void | - | optional |
className | string | - | optional |
placement | "top" | "bottom" | "bottom" | optional |
dir | "ltr" | "rtl" | — | optional |