Command Menu

Search documentation, components, and switch theme.

Atoms

Dropdown Menu

Opens a menu when the user clicks a trigger.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/dropdown-menu

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>View Transaction</DropdownMenuItem>
    <DropdownMenuItem>Copy ID</DropdownMenuItem>
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples#

With Icons#

Checkboxes#

Radio Group#

Submenu#