Sprout Social

Components

Menu - New!

View on GitHub

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

The ecosystem

Our Menu ecosystem is built on a foundation of Primitive components and Menu components, offering a flexible system for creating a wide range of user experiences.

Menu Components

These are the Menu components included in seeds-react-menu which offer streamlined solutions for common use cases, with sensible defaults and built-in accessibility support.

Primitives

Primitive components provide low-level building blocks for full control over structure and behavior, enabling tailored interactions and complex custom layouts.

Recipes

Below are some common patterns and recipes for working with Seeds menu components.

Controlled SingleSelectMenu

You can control the selectedItem by using the onSelectedItemChange prop. Most single selection menus will want to control the selection state.

Example:

() => {

  const [selected, setSelected] = React.useState(null);



  return (

    <Box display="flex" flexDirection="column" alignItems="center" gap={300}>

      <Box>

        <strong>Selected:</strong> {selected ? selected.id : "None"}

      </Box>

      <SingleSelectMenu

        menuToggleElement={<MenuToggleButton>Select an item</MenuToggleButton>}

        selectedItem={selected}

        onSelectedItemChange={({selectedItem}) => setSelected(selectedItem)}

      >

        <MenuContent>

          <MenuGroup id="fruits" title="Fruits">

            <MenuItem id="apple" inputType="radio">Apple</MenuItem>

            <MenuItem id="banana" inputType="radio">Banana</MenuItem>

            <MenuItem id="orange" inputType="radio">Orange</MenuItem>

          </MenuGroup>

        </MenuContent>

      </SingleSelectMenu>

    </Box>

  );

}

Controlled MultiSelectMenu

You can control the selectedItems by using the onSelectedItemsChange prop. Most multiple selection menus will want to control the selection state.

Example:

() => {

  const [selected, setSelected] = React.useState([]);



  return (

    <Box display="flex" flexDirection="column" alignItems="center" gap={300}>

      <Box>

        <strong>Selected:</strong> {selected.length ? selected.map(item => item.id).join(', ') : "None"}

      </Box>

      <MultiSelectMenu

        menuToggleElement={<MenuToggleButton>Select an item</MenuToggleButton>}

        selectedItems={selected}

        onSelectedItemsChange={({selectedItems}) => setSelected(selectedItems)}

      >

        <MenuContent>

          <MenuGroup id="fruits" title="Fruits">

            <MenuItem id="apple" inputType="checkbox">Apple</MenuItem>

            <MenuItem id="banana" inputType="checkbox">Banana</MenuItem>

            <MenuItem id="orange" inputType="checkbox">Orange</MenuItem>

          </MenuGroup>

        </MenuContent>

      </MultiSelectMenu>

    </Box>

  );

}

ActionMenu with Icons

You can add icons to your menu items by using the Icon component inside each MenuItem. Decorative icons in the menu items should be left aligned except for a few specific use cases, such as status, info or call to action icons.

Example:

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

  <ActionMenu menuToggleElement={<MenuToggleButton>Actions</MenuToggleButton>}>

    <MenuContent>

      <MenuItem

        id="edit"

        onClick={() => alert('Edit clicked')}

      >

        <Box display="flex" flexDirection="row" alignItems="center" gap={200}>

          <Icon name="pencil" />

          Edit

        </Box>

      </MenuItem>

      <MenuItem

        id="duplicate"

        onClick={() => alert('Duplicate clicked')}

      >

        <Box display="flex" flexDirection="row" alignItems="center" gap={200}>

          <Icon name="papers" />

          Duplicate

        </Box>

      </MenuItem>

      <MenuItem

        id="delete"

        onClick={() => alert('Delete clicked')}

      >

        <Box display="flex" flexDirection="row" alignItems="center" gap={200} color="text.error">

          <Icon name="trash" color="icon.error" />

          Delete

        </Box>

      </MenuItem>

    </MenuContent>

  </ActionMenu>

</Box>