如何在MaterialUI头部菜单中为第三个项添加下拉子菜单？

核心思路 #

针对第三个菜单项（Item3），使用MaterialUI的Menu和MenuItem组件实现下拉功能，搭配KeyboardArrowDownIcon添加下拉箭头，通过状态控制菜单的显示与隐藏。

实现步骤及代码示例 #

1. 导入所需组件
   除了已有组件，还需要导入下拉相关的组件：

   import { useState } from 'react';
   import { Box, Button, Menu, MenuItem, KeyboardArrowDownIcon } from '@mui/material';
   

2. 定义状态与处理函数
   添加状态控制菜单的锚点元素和显示状态，以及对应的打开/关闭函数：

   const pages = ["Item1", "Item2", "Item3", "Item4"];
   // 子菜单选项
   const subPages = ["SubItem1", "SubItem2", "SubItem3"];
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   
   // 打开下拉菜单
   const handleOpenMenu = (event) => {
     setAnchorEl(event.currentTarget);
   };
   
   // 关闭下拉菜单
   const handleCloseMenu = () => {
     setAnchorEl(null);
   };
   

3. 修改导航栏渲染逻辑
   遍历菜单项时，对Item3单独处理，添加下拉箭头并绑定打开菜单事件，其他项保持原有逻辑：

   <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
     {pages.map((page) => {
       if (page === "Item3") {
         return (
           <Button
             key={page}
             id="item3-button"
             onClick={handleOpenMenu}
             sx={{ my: 2, color: "white", display: "flex", alignItems: "center", gap: 0.5 }}
             endIcon={<KeyboardArrowDownIcon />}
           >
             {page}
           </Button>
         );
       }
       return (
         <Button
           key={page}
           onClick={handleCloseMenu}
           sx={{ my: 2, color: "white", display: "block" }}
         >
           {page}
         </Button>
       );
     })}
     {/* 渲染下拉子菜单 */}
     <Menu
       id="item3-submenu"
       anchorEl={anchorEl}
       open={open}
       onClose={handleCloseMenu}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
     >
       {subPages.map((subPage) => (
         <MenuItem key={subPage} onClick={handleCloseMenu}>
           {subPage}
         </MenuItem>
       ))}
     </Menu>
   </Box>
   

关键细节说明 #

• 使用endIcon属性为Item3按钮添加KeyboardArrowDownIcon，实现下拉箭头效果，同时通过display: flex和alignItems: center让文字与箭头垂直居中。
• Menu组件通过anchorEl绑定触发按钮，anchorOrigin和transformOrigin控制菜单弹出的位置，避免遮挡按钮。
• 所有关闭菜单的操作（点击其他菜单项、点击子菜单项、点击菜单外部）都绑定handleCloseMenu函数，保证状态统一。

内容的提问来源于stack exchange，提问作者max_