<div>
<Wrap align="center">
    <Menu>
        <MenuButton
            as={Button}
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Menu
        </MenuButton>
        <MenuList>
            <MenuItem>Edit</MenuItem>
            <MenuItem>Rename</MenuItem>
            <MenuItem>Duplicate</MenuItem>
            <MenuItem color="danger">Delete</MenuItem>
        </MenuList>
    </Menu>
    <Menu>
        <MenuButton
            as={Button}
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Menu with icons
        </MenuButton>
        <MenuList>
            <MenuItem
                icon={
                    <Icon>
                        <path d={mdiPencilOutline} />
                    </Icon>
                }
            >
                Edit
            </MenuItem>
            <MenuItem
                icon={
                    <Icon>
                        <path d={mdiFormTextbox} />
                    </Icon>
                }
            >
                Rename
            </MenuItem>
            <MenuItem
                icon={
                    <Icon>
                        <path d={mdiContentCopy} />
                    </Icon>
                }
            >
                Duplicate
            </MenuItem>
            <MenuItem
                color="danger"
                icon={
                    <Icon color="danger">
                        <path d={mdiTrashCanOutline} />
                    </Icon>
                }
            >
                Delete
            </MenuItem>
        </MenuList>
    </Menu>
    <Menu>
        <MenuButton
            as={Button}
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Menu with keyboard shortcuts
        </MenuButton>
        <MenuList>
            <MenuItem command="⌘B">Bold</MenuItem>
            <MenuItem command="⌘I">Italic</MenuItem>
            <MenuItem command="⌘U">Underline</MenuItem>
            <MenuItem command="⇧⌘X">Strikethrough</MenuItem>
            <MenuItem command="⌥⌘C">Code block</MenuItem>
        </MenuList>
    </Menu>
    <Menu>
        <MenuButton
            as={Button}
            rightIcon={
                <Icon layerStyle="menuButtonIcon">
                    <path d={mdiChevronDown} />
                </Icon>
            }
        >
            Menu with groups
        </MenuButton>
        <MenuList>
            <MenuGroup title="Fruits">
                <MenuItem>Pear</MenuItem>
                <MenuItem>Pineapple</MenuItem>
            </MenuGroup>
            <MenuDivider />
            <MenuGroup title="Vegetables">
                <MenuItem>Cucumber</MenuItem>
                <MenuItem>Carrot</MenuItem>
            </MenuGroup>
        </MenuList>
    </Menu>
</Wrap>
</div>