Menu 菜单

菜单在临时出现的位置上显示了一系列的选项。

菜单在临时的表面上显示选择列表。当用户和一个按钮、或者其他控制元件交互的时候，菜单会出现。

默认情况下，基础菜单会在描点元素上打开（这种方式可以使用属性来改变）。当靠近屏幕边缘时，简单菜单会在垂直方向上重新对齐，以确保所有菜单子项（menu items）都完全可见。

理想状态下，选择一个选项是会立刻执行此选项并且关闭整个菜单。

解疑：与简单菜单不同，一个简单的对话框可以提供与列表项可用选项相关的额外细节，或提供与主要任务相关的导航或正交操作。虽然它们都可以显示相同的内容，但是菜单组件比对话框组件更受欢迎，因为相比之下菜单组件对用户的干扰更小。

In desktop viewport, padding is increased to give more space to the menu.

For the menu that has long list and long text, you can use the dense prop to reduce the padding and text size.

If used for item selection, when opened, simple menus places the initial focus on the selected menu item. The currently selected menu item is set using the selected prop (from ListItem). To use a selected menu item without impacting the initial focus, set the variant prop to "menu".

Because the Menu component uses the Popover component to position itself, you can use the same positioning props to position it. 例如，你可以在描点的下方显示菜单：

MenuList 组合

在菜单组件的内部，其实使用了 Popover 组件。但是，您可能想要使用不同的元素定位的方式，或者您不想禁止页面的滚动。为了满足这些需求，我们公开了一个 MenuList 组件，您可以像下面例子中这样结合 Popper 来编写自己的菜单组件。

MenuList 组件的主要任务是处理焦点。

如果最大高度的菜单仍无法显示所有菜单项，则菜单可以在内部滚动。

Contact

Profile

更改过渡动画

以下是自定义组件的一个示例。 You can learn more about this in the overrides documentation page.

MenuItem 的原理是用额外的样式包装了 ListItem 组件。你可以将同样的列表合成功能来装饰 MenuItem 组件：

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

如果最大高度的菜单仍无法显示所有菜单项，则菜单可以在内部滚动。

补充项目

有一个 flexbox 的错误，在 flexbox 的布局中，无法正常使用 text-overflow: ellipsis。您可以使用 Typography 组件和 noWrap 来解决此问题：

更改过渡动画

使用不同的过渡动画。

这是一个快捷菜单的示例。（单击右键就可以打开。）

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

Complementary projects

For more advanced use cases you might be able to take advantage of:

PopupState helper

There is a 3rd party package material-ui-popup-state that takes care of menu state for you in most cases.

<PopupState variant="popover" popupId="demo-popup-menu">
  {(popupState) => (
    <React.Fragment>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Dashboard
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Profile</MenuItem>
        <MenuItem onClick={popupState.close}>My account</MenuItem>
        <MenuItem onClick={popupState.close}>Logout</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

<PopupState variant="popover" popupId="demo-popup-menu">
  {(popupState) => (
    <React.Fragment>
      <Button variant="contained" {...bindTrigger(popupState)}>
        Dashboard
      </Button>
      <Menu {...bindMenu(popupState)}>
        <MenuItem onClick={popupState.close}>Profile</MenuItem>
        <MenuItem onClick={popupState.close}>My account</MenuItem>
        <MenuItem onClick={popupState.close}>Logout</MenuItem>
      </Menu>
    </React.Fragment>
  )}
</PopupState>

Press Enter to start editing

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

Menu 菜单

基础菜单

选择菜单

菜单定位

MenuList 组合

自定义菜单

MenuList 组合

设计局限

更改过渡动画

快捷菜单 Context menu

补充项目

更改过渡动画

快捷菜单 Context menu

Complementary projects

PopupState helper

Unstyled

API