Dropdown Menu

1import {
2  DropdownMenu,
3  DropdownMenuCheckboxItem,
4  DropdownMenuContent,
5  DropdownMenuGroup,
6  DropdownMenuItem,
7  DropdownMenuLabel,
8  DropdownMenuSeparator,
9  DropdownMenuTrigger,
10} from "passport-ui";
11import { Button } from "passport-ui";

1<DropdownMenu>
2  <DropdownMenuTrigger>
3    <Button>Basic Menu</Button>
4  </DropdownMenuTrigger>
5  <DropdownMenuContent>
6    <DropdownMenuLabel>Account</DropdownMenuLabel>
7    <DropdownMenuSeparator />
8    <DropdownMenuItem>Profile</DropdownMenuItem>
9    <DropdownMenuItem>Billing</DropdownMenuItem>
10    <DropdownMenuItem variant="destructive">Logout</DropdownMenuItem>
11  </DropdownMenuContent>
12</DropdownMenu>
13 
14{/* With checkboxes */}
15<DropdownMenu>
16  <DropdownMenuTrigger>
17    <Button>List Menu</Button>
18  </DropdownMenuTrigger>
19  <DropdownMenuContent>
20    <DropdownMenuGroup>
21      <DropdownMenuLabel>Tasks</DropdownMenuLabel>
22      <DropdownMenuCheckboxItem checked>Ticket 1</DropdownMenuCheckboxItem>
23      <DropdownMenuCheckboxItem>Ticket 2</DropdownMenuCheckboxItem>
24      <DropdownMenuCheckboxItem checked>Ticket 3</DropdownMenuCheckboxItem>
25    </DropdownMenuGroup>
26  </DropdownMenuContent>
27</DropdownMenu>