Sprout Social

Components

Menu - New!

View on GitHub

Menu is an ecosystem of components that provide a structured and accessible way to create menus.

How items it works

Every Menu supports either passing a menuItems prop with a list of item objects or providing children which contain instances of the MenuItem component. When the items for the menu are provided in the children, then the Menu must search for each instance of the MenuItem in order to generate a list of items to provide to Downshift, but when the menuItems are provided then the component skips this step of walking through the children to generate this list.

This same logic applies to the MenuContent and MenuGroup components, so that the logic can be similarly simplified but still allow for custom composable content in the Menu's children.

Menu Items as children

Passing the MenuItem instances as children is the simplest implementation approach, but is the least performant since it requires the logic to walk the children to find each instance. This option is best for simple Menus that do not have many items, such as very basic Action Menus.

Using the menuItems prop

The menuItems prop allows you to provide an array of item objects directly to the Menu, which improves performance by avoiding the need to walk through children to find MenuItem components. Each item in the array must extend the TypeMenuItemProps, typically including properties like label, value, and optionally disabled to control whether the item is selectable.

The MenuItemComponent prop can be used along side the menuItems and lets you customize how each menu item is rendered in your Menu component. Instead of using the default MenuItem component, you can pass your own React component to control the appearance and behavior of each item.

Note: The id attribute in the menuItems must match the id prop provided to the MenuItemComponent in order for hover states and selection states to work as expected.

See the MenuItem component docs for more information about the props available for menu items and how to extend the component.

MultiSelectMenu with menuItems

import { MultiSelectMenu } from '@sproutsocial/seeds-react-menu'
() => {

  const items = [

    { id: "book-1", children: "Book One" },

    { id: "book-2", children: "Book Two" },

    { id: "book-3", children: "Book Three", disabled: true },

    { id: "book-4", children: "Book Four" },

  ];



  return (

    <Box display="flex" justifyContent="center" alignItems="center" height="100%">

      <MultiSelectMenu

        menuToggleElement={<MenuToggleButton>Select books</MenuToggleButton>}

        menuItems={items}

      />

    </Box>

  );

}

MenuContent with menuItems

import { MenuContent } from '@sproutsocial/seeds-react-menu'
() => {

  const items = [

    { id: "item-1", children: "First Item" },

    { id: "item-2", children: "Second Item" },

    { id: "item-3", children: "Third Item" },

  ];



  return (

    <Box display="flex" justifyContent="center" alignItems="center" height="100%">

      <MultiSelectMenu menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}>

        <MenuContent menuItems={items} />

      </MultiSelectMenu>

    </Box>

  );

}

MenuGroup with menuItems

import { MenuGroup } from '@sproutsocial/seeds-react-menu'
() => {

  const group1 = [

    { id: "group1-item-1", children: "Group 1 - Item 1" },

    { id: "group1-item-2", children: "Group 1 - Item 2" },

  ];

  const group2 = [

    { id: "group2-item-1", children: "Group 2 - Item 1" },

    { id: "group2-item-2", children: "Group 2 - Item 2" },

  ];



  return (

    <Box display="flex" justifyContent="center" alignItems="center" height="100%">

      <MultiSelectMenu menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}>

        <MenuContent>

          <MenuGroup id="group-one" title="Group One" menuItems={group1} />

          <MenuGroup id="group-two" title="Group Two" menuItems={group2} />

        </MenuContent>

      </MultiSelectMenu>

    </Box>

  );

}

Menu with Custom MenuItemComponent

You can use the MenuItemComponent prop to customize how each menu item is rendered.
Below is an example of passing an inline custom component to MenuItemComponent with the menuItems prop in a MultiSelectMenu:

import { MultiSelectMenu, MenuItem } from '@sproutsocial/seeds-react-menu'
() => {

  const items = [

    { id: "book-1", children: "Book One" },

    { id: "book-2", children: "Book Two" },

    { id: "book-3", children: "Book Three", disabled: true },

    { id: "book-4", children: "Book Four" },

  ];



  // Custom MenuItem component that adds a Facebook PartnerLogo and bolds the label

  const CustomMenuItem = (props) => (

    <MenuItem inputType="checkbox" {...props}>

      <Box display="flex" gap="8px">

        <PartnerLogo partnerName="facebook" />

        <span>{props.children}</span>

        {props.disabled && (

          <span style={{ color: "#aaa" }}>(disabled)</span>

        )}

      </Box>

    </MenuItem>

  );



  return (

    <Box display="flex" justifyContent="center" alignItems="center" height="100%">

      <MultiSelectMenu

        menuToggleElement={<MenuToggleButton>Select books</MenuToggleButton>}

        menuItems={items}

        MenuItemComponent={CustomMenuItem}

        width="auto"

      />

    </Box>

  );

}