Menu

Menus are used for adding a list of choices to an element that is visible on click. It should be used for context specific actions.

Import

// Tree shakable import
import { Menu, MenuItem } from '@bojagi/pablo';
// Or direct import
import { Menu, MenuItem } from '@bojagi/pablo/Menu';

Examples

Simple Menu

A menu needs to be attached to an element. This is done by placing the element as a child, it will automatically take the ref. This will change in the future though in favor of passing a ref and using the items as children. For now MenuItem elements are passed as an array in the items prop.

Live Editor

() => {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => setOpen(false);
  return (
    <Menu
    open={open}
    offset={-5}
    onClose={handleClose}
    items={[
      <MenuItem key="1" onClick={handleClose}>
        User Profile
      </MenuItem>,
      <MenuItem key="2" onClick={handleClose}>
        Settings
      </MenuItem>,
      <MenuItem key="3" onClick={handleClose}>
        Logout
      </MenuItem>,
    ]}
  >
    <Button onClick={() => setOpen(!open)}>Click me</Button>
  </Menu>
  );
}

Result

Loading...

Menu placement

Like every Popover style overlay, a Menu can be placed on different sides of it's attached element. For this you use the placement prop.

Live Editor

() => {
  const [open, setOpen] = React.useState(false);
  const [placement, setPlacement] = React.useState('top');
  const handleClose = () => setOpen(false);
  return (
    <>
      <Menu
        open={open}
        offset={-5}
        onClose={handleClose}
        items={[
          <MenuItem key="1" onClick={handleClose}>
            User Profile
          </MenuItem>,
          <MenuItem key="2" onClick={handleClose}>
            Settings
          </MenuItem>,
          <MenuItem key="3" onClick={handleClose}>
            Logout
          </MenuItem>,
        ]}
        placement={placement}
      >
        <Button onClick={() => setOpen(!open)}>Please click on me</Button>
      </Menu>
      <RadioGroup size="small" my={4} value={placement} onChange={setPlacement}>
        <Radio value="top" label="top" />
        <Radio value="top-start" label="top-start" />
        <Radio value="top-end" label="top-end" />
        <Radio value="right" label="right" />
        <Radio value="right-start" label="right-start" />
        <Radio value="right-end" label="right-end" />
        <Radio value="bottom" label="bottom" />
        <Radio value="bottom-start" label="bottom-start" />
        <Radio value="bottom-end" label="bottom-end" />
        <Radio value="left" label="left" />
        <Radio value="left-start" label="left-start" />
        <Radio value="left-end" label="left-end" />
      </RadioGroup>
    </>
  );
}

Result

Loading...

Menu with animation

You can easily add animations to your menu with the Pablo animation components. Pass a Pablo animation component like SlideAnimation or FadeAnimation to the animation prop and with the animationProps prop you configure animation properties such as duration and side of the animation.

Live Editor

() => {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => setOpen(false);
  return (
    <Menu
    open={open}
    offset={-5}
    animation={SlideAnimation}
    animationProps={{
      duration: 150,
      side: 'bottom',
    }}
    onClose={handleClose}
    items={[
      <MenuItem key="1" onClick={handleClose}>
        User Profile
      </MenuItem>,
      <MenuItem key="2" onClick={handleClose}>
        Settings
      </MenuItem>,
      <MenuItem key="3" onClick={handleClose}>
        Logout
      </MenuItem>,
    ]}
  >
    <Button onClick={() => setOpen(!open)}>Click me</Button>
  </Menu>
  );
}

Result

Loading...

Props

Menu

Name	Type	Default Value	Required	Description

MenuItem

Name	Type	Default Value	Required	Description