Menu

1import {
2  Divider,
3  IconClipboard,
4  IconCopy,
5  IconTrash,
6  Menu,
7} from "@supabase/ui";
8
9export default function MenuBasic() {
10  return (
11    <Menu>
12      <Menu.Item icon={<IconClipboard />}>Copy</Menu.Item>
13      <Menu.Item icon={<IconCopy />}>Duplicate</Menu.Item>
14      <Divider light />
15      <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
16    </Menu>
17  );
18}
19

1import { IconClipboard, IconCopy, IconTrash, Menu } from "@supabase/ui";
2
3export default function MenuBasic() {
4  return (
5    <Menu>
6      <Menu.Group title="Billing" />
7      <Menu.Item icon={<IconClipboard />}>Copy</Menu.Item>
8      <Menu.Item icon={<IconCopy />}>Duplicate</Menu.Item>
9      <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
10      <Menu.Group title="Support" />
11      <Menu.Item icon={<IconClipboard />}>Copy</Menu.Item>
12      <Menu.Item icon={<IconCopy />}>Duplicate</Menu.Item>
13      <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
14    </Menu>
15  );
16}
17

1import { IconClipboard, IconCopy, IconTrash, Menu } from "@supabase/ui";
2
3export default function MenuActiveState() {
4  return (
5    <Menu>
6      <Menu.Group title="Billing" />
7      <Menu.Item active icon={<IconClipboard />}>
8        Copy
9      </Menu.Item>
10      <Menu.Item icon={<IconCopy />}>Duplicate</Menu.Item>
11      <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
12      <Menu.Group title="Support" />
13      <Menu.Item icon={<IconClipboard />}>Copy</Menu.Item>
14      <Menu.Item active showActiveBar icon={<IconCopy />}>
15        Duplicate
16      </Menu.Item>
17      <Menu.Item icon={<IconTrash stroke="red" />}>Delete</Menu.Item>
18    </Menu>
19  );
20}
21