Menu - Deprecated

Components

Menu - Deprecated

Menu - Deprecated

Menus are used to present a list of actions to a user.

Menus are visually similar to the component, but Menus do not represent a selection, and are instead used to present a set of items that each have their own, independent action.

Menus can be rendered inline on a page, or you can place them in a popout using the MenuButton component.

import { Menu } from '@sproutsocial/racine'

<Box
  width="200px"
  border={500}
  borderRadius="outer"
  borderColor="container.border.base"
  boxShadow='medium'
>
  <Menu>
    <Menu.Group title="Fruit">
      <Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
      <Menu.Item onClick={() => alert('Orange!')}>Orange</Menu.Item>
      <Menu.Item onClick={() => alert('Banana!')}>Banana</Menu.Item>
    </Menu.Group>
  </Menu>
</Box>

Properties

Name	Type	Default	Description
`children`	`React.Node`
`role`	`menu`, `list`	`menu`
`innerRef`	`React.Ref`		Used if you need to compose Menu with Downshift
`footerContent`	`React.Node`		Content to display below the `Menu.Item`s. Any interactive elements that you want to display below the menu should be passed here, not as children.

Subcomponents

Groups are used to provide default padding and spacing around items, and can optionally render a visual label for a group of items.

<Menu.Group title="Fruit">
  <Box bg="neutral.100" p={400} />
</Menu.Group>

Name	Type	Default	Description
`children`	`React.Node`
`title`	`React.Ref`		If provided, a group header will be rendered in the menu
`appearance`	`default`, `flush`	`default`	Use the flush appearance if you're using the menu group with a title outside of a popout
`disabled`	`boolean`	`false`	If all of the items in a group are disabled, the group title should also be disabled

Represents a unique value within a menu. Selected items are indicated with a check icon and text.

<Box>
  <Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
  <Menu.Item onClick={() => alert('Orange!')} selected>
    Orange
  </Menu.Item>
</Box>

Name	Type	Default	Description
`children`	`React.Node`
`disabled`	`boolean`	`false`
`onClick`	`(event) => ()`
`elemBefore`	`React.Node`		A component to be rendered before the children of the menu item
`elemAfter`	`React.Node`		A component to be rendered after the children of the menu item

A Menu Item with a visible representing a toggleable option. Use the placement prop to determine whether the Switch is positioned before its children or after the children. It will override the elemBefore or elemAfter prop of Menu.Item accordingly.

() => {
  const [isChecked, setIsChecked] = useState(true);

  return (
    <Menu.Switch placement="after" onClick={() => setIsChecked(!isChecked)} selected={isChecked}>
      Show Archived Tags
    </Menu.Switch>
  );
}

Switches may also be used directly in the footer of the Menu using when appropriate. Do not use Menu.Switch in this case.

Menu.Switch accepts the following props in addition to Menu.Item's props:

Name	Type	Description
`placement`	`before`,`after`	Should the Switch be rendered in the `elemBefore` or `elemAfter` position?
`switchProps`	`Omit<TypeSwitchProps, 'onClick'>`	Any additional props to pass to the Switch. `onClick` is omitted because the top-level `onClick` prop should be used instead.
`labelProps`	`Omit<TypeTextProps, 'children'>`	Any additional props to add to the Switch's label. `children` is omitted because Menu.Switch's children is rendered as the label's children.

A horizontal line with the "separator" role. Accepts the same props as

Recipes

In a popout

In most cases, Menus appear nested within popouts that appear when a user clicks a button. Because this is such a common pattern, there is a MenuButton component that makes it easy to implement.

<MenuButton
  appearance="secondary"
  placement='bottom-end'
  aria-label="Open menu"
  px={450}
  content={
    <Menu width="200px">
      <Menu.Group>
        <Menu.Item onClick={() => alert('Kiwi!')}>Kiwi</Menu.Item>
        <Menu.Item onClick={() => alert('Papaya!')}>Papaya</Menu.Item>
        <Menu.Item onClick={() => alert('Mango!')}>Mango</Menu.Item>
      </Menu.Group>
    </Menu>
  }
>
  Fruits
</MenuButton>

Groups

<Box
  width="220px"
  border={500}
  borderRadius="outer"
  borderColor="container.border.base"
  boxShadow='medium'
>
  <Menu>
    <Menu.Group title="Fruit">
      <Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
      <Menu.Item onClick={() => alert('Orange!')}>Orange</Menu.Item>
      <Menu.Item onClick={() => alert('Banana!')}>Banana</Menu.Item>
    </Menu.Group>

    <Menu.Group title="More fruit">
      <Menu.Item onClick={() => alert('Kiwi!')}>Kiwi</Menu.Item>
      <Menu.Item onClick={() => alert('Papaya!')}>Papaya</Menu.Item>
      <Menu.Item onClick={() => alert('Mango!')}>Mango</Menu.Item>
    </Menu.Group>
  </Menu>
</Box>

Using dividers and footerContent

One use for Menu.Divider is to separate items in the menu from the footer. Any information that you would like to display below the menu items should be passed to Menu as . It is especially important to use footerContent when including interactive content, as it will not be accessible to keyboard users if passed as children.

<Box
  width="220px"
  border={500}
  borderRadius="outer"
  borderColor="container.border.base"
  boxShadow='medium'
>
  <Menu
    footerContent={
      <Box p={350}>
        <Link onClick={() => {}}>
          View Fruit Help
        </Link>
      </Box>
    }
  >
    <Menu.Group title="Fruit">
      <Menu.Item onClick={() => alert('Apple!')}>Apple</Menu.Item>
      <Menu.Item onClick={() => alert('Orange!')}>Orange</Menu.Item>
      <Menu.Item onClick={() => alert('Banana!')}>Banana</Menu.Item>
    </Menu.Group>
    <Menu.Divider />
  </Menu>
</Box>

<Box
  width="250px"
  border={500}
  borderRadius="outer"
  borderColor="container.border.base"
  boxShadow='medium'
>
  <Menu>
    <Menu.Group>
      <Menu.Item onClick={() => alert('Apple!')}>
        <Text as="div" fontWeight="semibold">
          Apple
        </Text>
        <Text as="div" fontSize={100} color="text.subtext">
          Some items in a menu might need descriptive text.
        </Text>
      </Menu.Item>
      <Menu.Item onClick={() => alert('Orange!')}>
        <Text as="div" fontWeight="semibold">
          Orange
        </Text>
      </Menu.Item>
      <Menu.Item
        onClick={() => alert('Banana!')}
        elemAfter={
          <Tooltip placement="top" content="Special fruit">
            <Icon name="sparkle-outline" color="purple.600" mt="-2px" aria-hidden />
          </Tooltip>
        }
      >
        <Box display="flex" alignItems="center" justifyContent="space-between">
          <Text as="div" fontWeight="semibold">
            Banana
          </Text>
        </Box>
      </Menu.Item>
    </Menu.Group>
  </Menu>
</Box>

As a list

In some cases menu items themselves are not actionable, but represent items which have associated actions. In this case, you must set the role of the Menu component to list in order to be accessible.

<Box
  width="250px"
  border={500}
  borderRadius="outer"
  borderColor="container.border.base"
  boxShadow='medium'
>
  <Menu role="list">
    <Menu.Group title="Fruit">
      <Menu.Item
        elemAfter={
          <Button p={100} aria-label="Delete Apple">
            <Icon name="trash-outline" aria-hidden />
          </Button>
        }
      >
        Apple
      </Menu.Item>
      <Menu.Item
        elemAfter={
          <Button p={100} aria-label="Delete Orange">
            <Icon name="trash-outline" aria-hidden />
          </Button>
        }
      >
        Orange
      </Menu.Item>
      <Menu.Item
        elemAfter={
          <Button p={100} aria-label="Delete Banana">
            <Icon name="trash-outline" aria-hidden />
          </Button>
        }
      >
        Banana
      </Menu.Item>
    </Menu.Group>
  </Menu>
</Box>

Menu - Deprecated

Properties

Subcomponents

Menu group

Menu item

Menu Switch

Menu divider

Recipes

In a popout

Groups

Using dividers and footerContent

Customizing menu items

As a list