Sprout Social

Components

Menu

View on GitHub

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

NameTypeDefaultDescriptionRequired?
childrenReact.Node
rolemenu, listmenu
innerRefReact.RefUsed if you need to compose Menu with Downshift
footerContentReact.NodeContent to display below the Menu.Items. Any interactive elements that you want to display below the menu should be passed here, not as children.

Subcomponents

Menu group

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>
NameTypeDefaultDescriptionRequired?
childrenReact.Node
titleReact.RefIf provided, a group header will be rendered in the menu
appearancedefault, flushdefaultUse the flush appearance if you're using the menu group with a title outside of a popout
disabledbooleanfalseIf all of the items in a group are disabled, the group title should also be disabled

Menu item

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>
NameTypeDefaultDescriptionRequired?
childrenReact.Node
disabledbooleanfalse
onClick(event) => ()
elemBeforeReact.NodeA component to be rendered before the children of the menu item
elemAfterReact.NodeA component to be rendered after the children of the menu item

Menu Switch

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:

NameTypeDefaultDescriptionRequired?
placementbefore,afterShould the Switch be rendered in the elemBefore or elemAfter position?
switchPropsOmit<TypeSwitchProps, 'onClick'>Any additional props to pass to the Switch. onClick is omitted because the top-level onClick prop should be used instead.
labelPropsOmit<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.

Menu divider

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>

Customizing menu items

<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>