148 lines
4.6 KiB
Markdown
148 lines
4.6 KiB
Markdown
- Home
|
|
- Components
|
|
- Dropdown
|
|
|
|
# Dropdown Menu
|
|
|
|
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
|
|
|
|
## Props
|
|
|
|
All primitives mirror Radix Dropdown Menu props.
|
|
|
|
- DropdownMenu: root provider
|
|
- DropdownMenuTrigger: trigger element (supports asChild)
|
|
- DropdownMenuContent: menu content, accepts align, sideOffset
|
|
- DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator
|
|
- DropdownMenuItem: accepts inset?: boolean, variant?: 'default' | 'destructive'
|
|
- DropdownMenuCheckboxItem: controlled/unchecked states via checked
|
|
- DropdownMenuRadioGroup and DropdownMenuRadioItem
|
|
- DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent
|
|
- DropdownMenuShortcut: right-aligned shortcut text
|
|
|
|
## Usage
|
|
|
|
```
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Dropdown Menu</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="start">
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
Profile
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Billing
|
|
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Settings
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Keyboard shortcuts
|
|
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>Email</DropdownMenuItem>
|
|
<DropdownMenuItem>Message</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>More...</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem>
|
|
New Team
|
|
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="mb-xs">GitHub</DropdownMenuItem>
|
|
<DropdownMenuItem className="mb-xs">Support</DropdownMenuItem>
|
|
<DropdownMenuItem disabled>API</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
Log out
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
```
|
|
|
|
## Checkboxes
|
|
|
|
```
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem
|
|
checked={true}
|
|
>
|
|
Status Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={true}
|
|
disabled
|
|
>
|
|
Activity Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={false}
|
|
>
|
|
Panel
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
```
|
|
|
|
## Radio Group
|
|
|
|
```
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuRadioGroup value={"top"}>
|
|
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
```
|
|
|
|
### Example
|
|
|
|
```
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem inset>New File</DropdownMenuItem>
|
|
<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuCheckboxItem checked>Show Hidden</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
```
|
|
|