Dropdown
A dropdown menu triggered by a button, icon, or avatar. Supports configurable alignment and RTL.
Installation
npx sdaia-ui@latest add dropdown
Usage
import { Dropdown } from "@/components/ui/dropdown"<Dropdown type="button" />Examples
Button
Dropdown triggered by a standard button.
<Dropdown type="button" label="Button" variant="primary" alignment="end"Icon
Dropdown triggered by an icon button.
<Dropdown type="icon" alignment="end" items={items} header={{ name: 'Name Surname', email: 'email@example.com' }}Avatar
Dropdown triggered by a user avatar.
<Dropdown type="avatar" alignment="end" items={items} header={{ name: 'Name Surname', email: 'email@example.com' }}Alignment
Dropdown menu aligned to the start, center, or end of the trigger.
<div className="flex items-start justify-between gap-spacing-4xl px-spacing-4xl py-spacing-xl"> <Dropdown type="button" label="Start" variant="primary" alignment="start" items={items} header={header} /> <Dropdown type="button" label="Center" variant="primary" alignment="center" items={items} header={header} /> <Dropdown type="button" label="End" variant="primary" alignment="end" items={items} header={header} /></div>API Reference
DropdownProps
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 |