Use DropdownMenu to offer a list of actions from a trigger.
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@tile-ui/react';
export default function DropdownMenuDemo() {
return (
<DropdownMenu>
<DropdownMenuTrigger className="component-preview__action">Open menu</DropdownMenuTrigger>
Registry install
pnpm dlx shadcn@latest add @tile-ui/dropdown-menu
Package usage
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@tile-ui/react';
<DropdownMenu>
<DropdownMenuTrigger>Menu</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
Highlights
- Item, checkbox item, and radio group
- Sub menus
- Side, align, and offset
Registry dependencies
| Item | Purpose |
|---|
dropdown-menu | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
| Prop | Type | Default |
|---|
asChild | boolean | — |
| Prop | Type | Default |
|---|
side | 'top' | 'right' | 'bottom' | 'left' | — |
align | 'start' | 'center' | 'end' | — |
sideOffset | number | — |
alignOffset | number | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
variant | 'default' | 'destructive' | — |
disabled | boolean | — |
onSelect | (event: Event) => void | — |
| Prop | Type | Default |
|---|
checked | boolean | — |
defaultChecked | boolean | — |
onCheckedChange | (checked: boolean) => void | — |
disabled | boolean | — |
onSelect | (event: Event) => void | — |
| Prop | Type | Default |
|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
| Prop | Type | Default |
|---|
value | string | — |
disabled | boolean | — |
onSelect | (event: Event) => void | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
disabled | boolean | — |