Menu
View Chakra UI documentation
<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>