Dropdown Menu

1import {
2  DropdownMenu,
3  DropdownMenuTrigger,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuLabel,
7  DropdownMenuSeparator,
8  DropdownMenuSub,
9  DropdownMenuSubContent,
10  DropdownMenuSubTrigger,
11} from "@/components/ui/dropdown-menu";
12
13export function Example() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger asChild>
17        <Button variant="outline" className="w-full sm:w-auto">
18          Open
19        </Button>
20      </DropdownMenuTrigger>
21      <DropdownMenuContent className="w-56" align="start">
22        <DropdownMenuLabel>My Account</DropdownMenuLabel>
23        <DropdownMenuGroup>
24          <DropdownMenuItem>
25            Profile
26            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
27          </DropdownMenuItem>
28          <DropdownMenuItem>
29            Billing
30            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
31          </DropdownMenuItem>
32          <DropdownMenuItem>
33            Settings
34            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
35          </DropdownMenuItem>
36          <DropdownMenuItem>
37            Keyboard shortcuts
38            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
39          </DropdownMenuItem>
40        </DropdownMenuGroup>
41        <DropdownMenuSeparator />
42        <DropdownMenuGroup>
43          <DropdownMenuItem>Team</DropdownMenuItem>
44          <DropdownMenuSub>
45            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
46            <DropdownMenuPortal>
47              <DropdownMenuSubContent>
48                <DropdownMenuItem>Email</DropdownMenuItem>
49                <DropdownMenuItem>Message</DropdownMenuItem>
50                <DropdownMenuSeparator />
51                <DropdownMenuItem>More...</DropdownMenuItem>
52              </DropdownMenuSubContent>
53            </DropdownMenuPortal>
54          </DropdownMenuSub>
55          <DropdownMenuItem>
56            New Team
57            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
58          </DropdownMenuItem>
59        </DropdownMenuGroup>
60        <DropdownMenuSeparator />
61        <DropdownMenuItem>GitHub</DropdownMenuItem>
62        <DropdownMenuItem>Support</DropdownMenuItem>
63        <DropdownMenuItem disabled>API</DropdownMenuItem>
64        <DropdownMenuSeparator />
65        <DropdownMenuItem>
66          Log out
67          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
68        </DropdownMenuItem>
69      </DropdownMenuContent>
70    </DropdownMenu>
71  );
72}