Reach-ui: [?] - Is it possible to override the MenuButton MenuList position

[coreybruyere]

I'm looking to use the MenuButton component as more of a Popover, meaning that I can be positioned on the top-left, top-right, bottom-left, or bottom-right of the element. Can the styled returned to [data-reach-menu] be overwritten?

[paulconlin]

Would also suggest this feature as well. The tooltip component's postition prop was really nice to work with.

[smathson]

Also requesting adding a position prop to the MenuList component to force positioning. Happy to submit a PR if this seems like something that would be accepted.

[chaance]

Just FYI, we are actively re-writing the MenuButton component and it will include the same kind of implementation we're using with Combobox and tooltip, meaning you'll be able to use the position prop. I imagine it'll be wrapped up in the next couple of weeks!

[chaance]

BTW, this has been added in 0.7.0

import { positionMatchWidth } from "@reach/popover";

function MyMenu() {
  return (
    <Menu>
      <MenuButton id="example-button">
        Actions <span aria-hidden="true">▾</span>
      </MenuButton>
      <MenuPopover position={positionMatchWidth}>
        <MenuItems>
          <MenuItem onSelect={action("Download")}>Download</MenuItem>
          <MenuItem onSelect={action("Copy")}>Create a Copy</MenuItem>
          <MenuItem onSelect={action("Mark as Draft")}>Mark as Draft</MenuItem>
          <MenuItem onSelect={action("Delete")}>Delete</MenuItem>
        </MenuItems>
      </MenuPopover>
    </Menu>
  )
}