Menu

Menu components of the RCL

PanMenuWrapper
Examples

PanMenuWrapper

A responsive wrapper around a list of menu items. It chooses the presentation from the screen size and renders your children inside it:

From the sm breakpoint up: a standard MUI Menu popup anchored to anchorEl (internal component PanMenu).
Below sm: a swipeable drawer sliding up from the bottom of the screen with a drag handle, where the children are placed in a MenuList (internal component PanMenuDrawer). anchorEl is ignored.

PanMenu and PanMenuDrawer are implementation details and are not exported; use PanMenuWrapper.

Prop	Type	Default	What it does
`isOpen`	`boolean`	required	Whether the menu (or drawer) is visible. The parent component owns this state.
`setIsOpen`	`(open: boolean) => void`	required	State setter called with `false` when the user dismisses the menu (clicking outside, pressing Escape, or swiping the drawer down). Your code is responsible for opening it again.
`anchorEl`	`HTMLElement`	none	The DOM element the popup is positioned next to, usually the button that opened it (`event.currentTarget`). Only used on larger screens.
`children`	`ReactNode`	none	The menu entries, typically MUI `MenuItem` elements (with `ListItemIcon` and `ListItemText`) and `Divider`s.

Examples

A menu opened from a button:

const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);

<Button
  onClick={(event) => {
    setAnchorEl(event.currentTarget);
    setIsOpen(true);
  }}
>
  Open Menu
</Button>
<PanMenuWrapper isOpen={isOpen} setIsOpen={setIsOpen} anchorEl={anchorEl}>
  <MenuItem onClick={() => setIsOpen(false)}>
    <ListItemText>Rename</ListItemText>
  </MenuItem>
  <Divider />
  <MenuItem onClick={() => setIsOpen(false)}>
    <ListItemText>Delete</ListItemText>
  </MenuItem>
</PanMenuWrapper>

Working demos are in src/componentDemos/V1.0 of the core-client-rcl repository.

Table of Contents

PanMenuWrapper

Examples