如何在菜单下拉菜单中制作一个按钮？

Question

I have a header which is made with MaterialUi. There are 4 menu items. I need to make it so that there is a down arrow near the third item and when clicked, a submenu with new items drops out. How can i do this?

 const pages = ["Item1", "Item2", "Item3", "Item4"]; <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}> {pages.map((page) => ( <Button key={page} onClick={handleCloseNavMenu} sx={{ my: 2, color: "white", display: "block" }} > {page} </Button> ))} </Box>

Answer 1

Easily use Menu component:

const pages = ["Item1", "Item2", "Item3", "Item4"];

function Test() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const isMenuOpen = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const name = event.currentTarget.name;
    switch (name) {
      case "Item1":
        //redirect to page 1
        break;
      case "Item2":
        //redirect to page 2
        break;
      case "Item3":
        setAnchorEl(event.currentTarget);
        break;
      case "Item4":
        //redirect to page 4
        break;
    }
  };

  const handleCloseMenu = () => {
    setAnchorEl(null);
  };

  return (
    <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
      {pages.map((page) => (
        <>
          <Button
            key={page}
            name={page}
            onClick={handleClick}
            sx={{ my: 2, color: "white", display: "block" }}
          >
            {page}
          </Button>
        </>
      ))}
      <Menu anchorEl={anchorEl} open={isMenuOpen} onClose={handleCloseMenu}>
        <MenuItem onClick={handleCloseMenu}>Profile</MenuItem>
        <MenuItem onClick={handleCloseMenu}>My account</MenuItem>
        <MenuItem onClick={handleCloseMenu}>Logout</MenuItem>
      </Menu>
    </Box>
  );
}
export default Test;