Dropdown Menu

1import {
2  DropdownMenu,
3  DropdownMenuTrigger,
4  DropdownMenuContent,
5  DropdownMenuItem,
6} from "@ecos/ui";
7
8<DropdownMenu>
9  <DropdownMenuTrigger asChild>
10    <Button>Actions</Button>
11  </DropdownMenuTrigger>
12
13  <DropdownMenuContent>
14    <DropdownMenuItem>Edit</DropdownMenuItem>
15    <DropdownMenuItem>Delete</DropdownMenuItem>
16  </DropdownMenuContent>
17</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Open Menu</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuItem>View</DropdownMenuItem>
8    <DropdownMenuItem>Edit</DropdownMenuItem>
9    <DropdownMenuItem>Archive</DropdownMenuItem>
10  </DropdownMenuContent>
11</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Account</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuLabel>My Account</DropdownMenuLabel>
8
9    <DropdownMenuSeparator />
10
11    <DropdownMenuItem>Profile</DropdownMenuItem>
12    <DropdownMenuItem>Billing</DropdownMenuItem>
13    <DropdownMenuItem>Settings</DropdownMenuItem>
14  </DropdownMenuContent>
15</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Actions</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuGroup>
8      <DropdownMenuItem>Copy</DropdownMenuItem>
9      <DropdownMenuItem>Duplicate</DropdownMenuItem>
10    </DropdownMenuGroup>
11
12    <DropdownMenuSeparator />
13
14    <DropdownMenuGroup>
15      <DropdownMenuItem>Archive</DropdownMenuItem>
16      <DropdownMenuItem>Delete</DropdownMenuItem>
17    </DropdownMenuGroup>
18  </DropdownMenuContent>
19</DropdownMenu>

1const [notifications, setNotifications] = React.useState(true);
2const [analytics, setAnalytics] = React.useState(false);
3
4<DropdownMenu>
5  <DropdownMenuTrigger asChild>
6    <Button>Preferences</Button>
7  </DropdownMenuTrigger>
8
9  <DropdownMenuContent>
10    <DropdownMenuCheckboxItem checked>Notifications</DropdownMenuCheckboxItem>
11    <DropdownMenuCheckboxItem>Analytics</DropdownMenuCheckboxItem>
12  </DropdownMenuContent>
13</DropdownMenu>

1const [theme, setTheme] = React.useState("system");
2
3<DropdownMenu>
4  <DropdownMenuTrigger asChild>
5    <Button>Theme</Button>
6  </DropdownMenuTrigger>
7
8  <DropdownMenuContent>
9    <DropdownMenuRadioGroup value="light">
10      <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
11      <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
12      <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
13    </DropdownMenuRadioGroup>
14  </DropdownMenuContent>
15</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Share</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuItem>Copy Link</DropdownMenuItem>
8
9    <DropdownMenuSub>
10      <DropdownMenuSubTrigger>Send To</DropdownMenuSubTrigger>
11
12      <DropdownMenuSubContent>
13        <DropdownMenuItem>Email</DropdownMenuItem>
14        <DropdownMenuItem>Teams</DropdownMenuItem>
15        <DropdownMenuItem>Slack</DropdownMenuItem>
16      </DropdownMenuSubContent>
17    </DropdownMenuSub>
18  </DropdownMenuContent>
19</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Tools</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuLabel inset>Tools</DropdownMenuLabel>
8
9    <DropdownMenuSeparator />
10
11    <DropdownMenuItem inset>Calculator</DropdownMenuItem>
12    <DropdownMenuItem inset>Currency Converter</DropdownMenuItem>
13  </DropdownMenuContent>
14</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Actions</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuItem>Edit</DropdownMenuItem>
8    <DropdownMenuItem disabled>Delete</DropdownMenuItem>
9  </DropdownMenuContent>
10</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Actions</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent
7    side="right"
8    align="start"
9    sideOffset={8}
10  >
11    <DropdownMenuItem>Item</DropdownMenuItem>
12  </DropdownMenuContent>
13</DropdownMenu>

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button>Settings</Button>
4  </DropdownMenuTrigger>
5
6  <DropdownMenuContent>
7    <DropdownMenuLabel>Preferences</DropdownMenuLabel>
8
9    <DropdownMenuSeparator />
10
11    <DropdownMenuGroup>
12      <DropdownMenuCheckboxItem checked>Notifications</DropdownMenuCheckboxItem>
13      <DropdownMenuCheckboxItem>Analytics</DropdownMenuCheckboxItem>
14    </DropdownMenuGroup>
15
16    <DropdownMenuSeparator />
17
18    <DropdownMenuSub>
19      <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
20
21      <DropdownMenuSubContent>
22        <DropdownMenuRadioGroup value="light">
23          <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
24          <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
25        </DropdownMenuRadioGroup>
26      </DropdownMenuSubContent>
27    </DropdownMenuSub>
28  </DropdownMenuContent>
29</DropdownMenu>