Describe how exactly to change where simple menus open

[dandv]

https://material-ui.com/components/menus/#simple-menu states:

Simple menus open over the anchor element by default (this option can be changed via props).

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,

1. In all other frameworks I've tried, menus open by default under, not over, their button.
2. MUI's setup is incredibly complicated, compared to other UI frameworks. For a drop-down menu with 2 items, the MUI code, without imports or the component declaration, would be 27 lines. In other components it's far, far simpler:
   • grommet - 7 lines
   • evergreen - 11 lines ("Menu with icons")
   • webix - 7 lines (bonus: 12 lines with click handler displaying a toast)

Can this drop-down menu use case be simplified?

[oliviertassinari]

@dandv Thanks for raising this issue. It seems that it bundles different concerns we can and should break down:

1. The positioning issue. Thanks for linking the StackOverflow issue 🙏, it's exactly why we promote this tool and only for questions/support. "Viewed 16k times" and 32 upvotes make is in the top 110 issues we have. This sounds like it deserves a section in the documentation.

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?

2. The boilerplate issue. I definitely agree, It's the value proposition material-ui-popup-state by @jedwards1211 brings. Speaking of which, the library now has a hook API, I think that we should update our demos for it, it would be awesome.
   We have on going discussion regarding a native support for it in the core in Dropdown component #9893.

3. The default positionning. This choice originates from the Material Design specification. However, it seems that they are moving away from it. We have a couple of issues open on the topic:

• [Select] Consistency with Autocomplete #18136
• [Popover] On mobile Chrome while zoomed, opening popover causes page to jump #17636 (comment)
• [Select] Follow material design guidelines #18493

I hope it has helped bring clarity.

[jedwards1211]

I do find the transformOrigin and anchorOrigin props a bit verbose, perhaps we should export topLeft, bottomRight, etc constants from somewhere?

[jedwards1211]

A more apt comparison with Grommet would be a menu aligned to a different dropTarget

[jedwards1211]

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 (isShown) as well, though it would be nice if children were optional in that case.