Sprout Social

Components

Menu - New!

View on GitHub

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

MenuItem

MenuItem is a basic building block used to represent an individual option within a menu. It handles interaction states like hover, focus, and selection, and can be customized with labels, icons, or other content. MenuItem is used within higher-level components like Action Menu and Single Select, or on its own when composing custom menu experiences with primitives.

Extends:

NameTypeDefaultDescriptionRequired?
children
React.ReactNode
disabled
boolean
false
role
(typeof MENU_ITEM_ROLES)[keyof typeof MENU_ITEM_ROLES]
innerRef
React.Ref<any>
$highlighted
boolean
active
boolean
inputType
(typeof INPUT_TYPES)[keyof typeof INPUT_TYPES]
inputLabelId
string

Note: Every MenuItem must have a unique id prop. This is required for accessibility and menu state management.

import { MenuItem } from '@sproutsocial/seeds-react-menu'
<MenuItem id="item-1">Item 1</MenuItem>

View MenuItem in Storybook

Common Use Cases

MenuItem is a flexible primitive that supports a variety of menu scenarios. Here are the most common use cases:

Standard Action Item

Use MenuItem for basic actions in a menu, such as “Compose Post” or “Delete.”

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

  const handleClick = (action) => alert(`${action} clicked!`);

  return (

    <Box display="flex" flexDirection="column" alignItems="center">

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

        <MenuContent>

          <MenuItem id="compose" onClick={() => handleClick('Compose Post')}>Compose Post</MenuItem>

          <MenuItem id="edit" onClick={() => handleClick('Edit Post')}>Edit Post</MenuItem>

          <MenuItem id="delete" onClick={() => handleClick('Delete Post')}>Delete Post</MenuItem>

        </MenuContent>

      </ActionMenu>

    </Box>

  );

}

Link/Navigation Item

Add the href prop to render a menu item as a link, suitable for navigation menus.

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

  <Box display="flex" flexDirection="column" alignItems="center">

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

      <MenuContent>

        <MenuItem id="home" href="https://example.com/home">Home</MenuItem>

        <MenuItem id="about" href="https://example.com/about">About</MenuItem>

        <MenuItem id="contact" href="https://example.com/contact">Contact</MenuItem>

      </MenuContent>

    </ActionMenu>

  </Box>

)

Disabled Item

Use the disabled prop to prevent interaction and visually indicate that the item is unavailable.

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

  <Box display="flex" flexDirection="column" alignItems="center">

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

      <MenuContent>

        <MenuItem id="compose">Compose Post</MenuItem>

        <MenuItem id="edit" disabled>Edit Post (Disabled)</MenuItem>

        <MenuItem id="delete">Delete Post</MenuItem>

      </MenuContent>

    </ActionMenu>

  </Box>

)

Selectable Items with inputType

Use the inputType prop to display a selection indicator next to the menu item:

  • "checkbox" for multi-select menus
  • "radio" for single-select menus
  • "switch" for toggleable settings
  • "icon" (or omit the prop) for the default icon indicator

Choose the value that matches your menu’s selection pattern.

Multi-select with checkboxes
import { MenuItem } from '@sproutsocial/seeds-react-menu'
() => (

  <Box display="flex" flexDirection="column" alignItems="center">

    <MultiSelectMenu menuToggleElement={<MenuToggleButton>Choose Fruits</MenuToggleButton>}>

      <MenuContent>

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

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

        <MenuItem id="cherry" inputType="checkbox">Cherry</MenuItem>

      </MenuContent>

    </MultiSelectMenu>

  </Box>

)
Single-select with radios
import { MenuItem } from '@sproutsocial/seeds-react-menu'
() => (

  <Box display="flex" flexDirection="column" alignItems="center">

    <SingleSelectMenu menuToggleElement={<MenuToggleButton>Choose One</MenuToggleButton>}>

      <MenuContent>

        <MenuItem id="option-1" inputType="radio">Option 1</MenuItem>

        <MenuItem id="option-2" inputType="radio">Option 2</MenuItem>

        <MenuItem id="option-3" inputType="radio">Option 3</MenuItem>

      </MenuContent>

    </SingleSelectMenu>

  </Box>

)
Toggle with switch
import { MenuItem } from '@sproutsocial/seeds-react-menu'
() => (

  <Box display="flex" flexDirection="column" alignItems="center">

    <MultiSelectMenu menuToggleElement={<MenuToggleButton>Settings</MenuToggleButton>}>

      <MenuContent>

        <MenuItem id="dark-mode" inputType="switch">Dark Mode</MenuItem>

        <MenuItem id="notifications" inputType="switch">Notifications</MenuItem>

      </MenuContent>

    </MultiSelectMenu>

  </Box>

)
Single-select with icon indicator (default)

When inputType is "icon" (or omitted), a checkmark icon will appear next to the selected item.

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

  <Box display="flex" flexDirection="column" alignItems="center">

    <SingleSelectMenu menuToggleElement={<MenuToggleButton>Choose a Color</MenuToggleButton>}>

      <MenuContent>

        <MenuItem id="red">Red</MenuItem>

        <MenuItem id="green">Green</MenuItem>

        <MenuItem id="blue">Blue</MenuItem>

      </MenuContent>

    </SingleSelectMenu>

  </Box>

)

Custom Content

You can include icons, badges, or other elements as children of MenuItem for richer menu options.

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

  <Box display="flex" flexDirection="column" alignItems="center">

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

      <MenuContent>

        <MenuItem id="star">

          <Icon name="star" mr={200} /> Starred

        </MenuItem>

        <MenuItem id="flag">

          <Icon name="flag" mr={200} /> Flag

        </MenuItem>

        <MenuItem id="check">

          <Icon name="check" mr={200} /> Complete

        </MenuItem>

      </MenuContent>

    </ActionMenu>

  </Box>

)

Custom Menu Item Component

For advanced use cases, you can create your own custom menu item component by composing MenuItem and adding custom logic or layout. This is useful for nested menus, submenus, or menu items with special actions.

Important:
When creating a custom menu item component, you must set the static property __MENU_PRIMITIVE_TYPE = "MenuItem" on your component. This allows the menu system to recognize your custom component as a valid menu item and ensure correct behavior.

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

  const CustomMenuItem = ({ id, children, ...rest }) => (

    <MenuItem id={id} {...rest}>

      <Box display="flex" justifyContent="space-between" alignItems="center" width="100%">

        {children}

        <Badge ml={200} color="primary">New</Badge>

      </Box>

    </MenuItem>

  );

  CustomMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";



  return (

    <Box display="flex" flexDirection="column" alignItems="center">

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

        <MenuContent>

          <MenuItem id="profile">Profile</MenuItem>

          <CustomMenuItem id="settings">Settings</CustomMenuItem>

          <MenuItem id="logout">Log Out</MenuItem>

        </MenuContent>

      </ActionMenu>

    </Box>

  );

}

Note:
Creating a custom menu item component is an advanced pattern. You are responsible for forwarding required props (like id), handling accessibility, and ensuring correct menu behavior. For most use cases, prefer customizing the content of MenuItem.