135 lines
2.8 KiB
Plaintext
135 lines
2.8 KiB
Plaintext
---
|
|
title: Dropdown Menu
|
|
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="radix-dropdown-menu-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="radix-dropdown-menu" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>Open Dropdown Menu</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem>Item 1</DropdownMenuItem>
|
|
<DropdownMenuItem>Item 2</DropdownMenuItem>
|
|
<DropdownMenuItem>Item 3</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Checkboxes
|
|
|
|
<ComponentPreview name="radix-dropdown-menu-checkboxes-demo" />
|
|
|
|
### Radio Group
|
|
|
|
<ComponentPreview name="radix-dropdown-menu-radio-group-demo" />
|
|
|
|
## Props
|
|
|
|
<div className="flex flex-row gap-x-3">
|
|
<ExternalLink
|
|
href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu"
|
|
text="Docs"
|
|
/>
|
|
<ExternalLink
|
|
href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference"
|
|
text="API Reference"
|
|
/>
|
|
</div>
|
|
|
|
### Animate UI props
|
|
|
|
#### DropdownMenu
|
|
|
|
<TypeTable
|
|
type={{
|
|
animateOnHover: {
|
|
description:
|
|
'Whether to animate the dropdown menu focus animation on hover',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
transition: {
|
|
description: 'The transition of the dropdown menu focus animation',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: '{ type: "spring", stiffness: 350, damping: 35 }',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
#### DropdownMenuSubTrigger
|
|
|
|
<TypeTable
|
|
type={{
|
|
inset: {
|
|
description: 'Whether the dropdown menu sub trigger is inset',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
#### DropdownMenuContent
|
|
|
|
<TypeTable
|
|
type={{
|
|
transition: {
|
|
description: 'The transition of the dropdown menu content animation',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: '{ duration: 0.2 }',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
#### DropdownMenuItem
|
|
|
|
<TypeTable
|
|
type={{
|
|
inset: {
|
|
description: 'Whether the dropdown menu item is inset',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
variant: {
|
|
description: 'The variant of the dropdown menu item',
|
|
type: "'default' | 'destructive'",
|
|
required: false,
|
|
default: 'default',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
#### DropdownMenuLabel
|
|
|
|
<TypeTable
|
|
type={{
|
|
inset: {
|
|
description: 'Whether the dropdown menu label is inset',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) for the dropdown menu component.
|
|
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/dropdown-menu) for the dropdown menu style.
|