Dropdown Menu
A toggleable menu that displays a list of actions or options.
Automatic Installation
This method is still working on progress, please use manual installation for now.
Manual Installation
Install dependencies
npm install radix-ui
Usage
Imports
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuSubMenuTrigger,
DropdownMenuSubMenu,
DropdownMenuSubMenuContent,
DropdownMenuGroup,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuCheckboxItem,
DropdownMenuIconWrapper,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuPortal,
} from '#/components/dropdown-menu'
Example
Browse the Storybook for more examples.
Anatomy
<DropdownMenu>
<DropdownMenuTrigger />
<DropdownMenuPortal>
<DropdownMenuContent>
<DropdownMenuLabel />
<DropdownMenuItem />
<DropdownMenuGroup>
<DropdownMenuItem />
</DropdownMenuGroup>
<DropdownMenuCheckboxItem>
<DropdownMenuItemIndicator />
</DropdownMenuCheckboxItem>
<DropdownMenuRadioGroup>
<DropdownMenuRadioItem>
<DropdownMenuItemIndicator />
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSub>
<DropdownMenuSubTrigger />
<DropdownMenuPortal>
<DropdownMenuSubContent />
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuArrow />
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu>
Edit on GitHub
Last updated on 3/24/2025