Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upDescribe how exactly to change where simple menus open #20755
Comments
|
@dandv Thanks for raising this issue. It seems that it bundles different concerns we can and should break down:
diff --git a/docs/src/pages/components/menus/PositionedMenu.js b/docs/src/pages/components/menus/PositionedMenu.js
new file mode 100644
index 000000000..d0e73ee79
--- /dev/null
+++ b/docs/src/pages/components/menus/PositionedMenu.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+export default function PositionedMenu() {
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+ <div>
+ <Button aria-controls="positioned-menu" aria-haspopup="true" onClick={handleClick}>
+ Open Menu
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
+ >
+ <MenuItem onClick={handleClose}>Profile</MenuItem>
+ <MenuItem onClick={handleClose}>My account</MenuItem>
+ <MenuItem onClick={handleClose}>Logout</MenuItem>
+ </Menu>
+ </div>
+ );
+}
diff --git a/docs/src/pages/components/menus/menus.md b/docs/src/pages/components/menus/menus.md
index f444823de..7213296e5 100644
--- a/docs/src/pages/components/menus/menus.md
+++ b/docs/src/pages/components/menus/menus.md
@@ -11,7 +11,7 @@ A [Menu](https://material.io/design/components/menus.html) displays a list of ch
## Simple Menu
-Simple menus open over the anchor element by default (this option can be changed via props). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible.
+Simple menus open over the anchor element by default (this option can be [changed](#positioned-menu) via props). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible.
Choosing an option should immediately ideally commit the option and close the menu.
@@ -28,6 +28,12 @@ To use a selected menu item without impacting the initial focus or the vertical
{{"demo": "pages/components/menus/SimpleListMenu.js"}}
+## Positioned menu
+
+The `Menu` component uses the `Popover` to position itself, you can use the same [positioning props](/components/popover/#anchor-playground). For instance, you can display the menu below the anchor:
+
+{{"demo": "pages/components/menus/PositionedMenu.js"}}
+
## MenuList composition
The `Menu` component uses the `Popover` component internally.Do you want to submit a pull request?
I hope it has helped bring clarity. |
|
I do find the |
|
A more apt comparison with Grommet would be a menu aligned to a different |
|
Here's the material-ui-popup-state way for reference. It's worth noting that Grommet provides no builtin way to open on hover, that would take boilerplate code. material-ui-popup-state provides hover boilerplate. Evergreen does have an open on hover option. And fortunately it supports a manual control property ( |
https://material-ui.com/components/menus/#simple-menu states:
How can this be changed via props? The page doesn't say. I went to the Menu API page, and I don't see anything simple like
open: 'below', or an offset.Developers have been struggling to figure this out for 2+ years, and there's still no clear solution.
Not to say that,
Can this drop-down menu use case be simplified?