Menu Layout Primitives

Components

Menu - New!

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

The Seeds menu system is built from a set of flexible layout primitives that let you compose menus to fit any design or interaction pattern. These primitives—MenuHeader, MenuFooter, MenuContent, and MenuGroup—work together to create a consistent, accessible, and customizable menu structure.

Overview

A typical menu is composed of:

MenuHeader (optional): Sits at the top of the menu, often used for titles, actions, or search fields. Accepts left and right actions, a title, and custom children (such as a search input).
MenuContent: The main container for menu items and groups. Handles keyboard navigation, ARIA roles, and accessibility. Can be used with direct MenuItem children or with the menuItems prop for data-driven rendering.
MenuGroup (optional): Used within MenuContent to visually and semantically group related items. Accepts a title, required id, and can also use the menuItems prop for convenience.
MenuFooter (optional): Appears at the bottom of the menu, ideal for secondary actions or links. Flexible container for any footer content, such as links or buttons.

Best Practices

Only include MenuItem components and related primitives like MenuGroup inside MenuContent.
Place any other content—such as search inputs, banners, or custom headers/footers—outside of MenuContent, using MenuHeader or MenuFooter.
Do not place MenuHeader or MenuFooter inside MenuContent, as this will break menu structure and accessibility.

This example shows how to compose a menu using MenuHeader, MenuContent, MenuGroup, and MenuFooter primitives.

import { MenuHeader, MenuFooter, MenuContent, MenuGroup, MenuItem, MenuToggleButton, ActionMenu, Box, Button, Icon, Link } from '@sproutsocial/seeds-react-menu'

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
  <ActionMenu
    menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
  >
    <MenuHeader
      leftAction={
        <Button width="24px" height="24px" display="flex" justifyContent="center" alignItems="center">
          <Icon name="arrow-left" />
        </Button>
      }
      rightAction={<Link href="#">Help</Link>}
      title="Menu Title"
    />
    <MenuContent>
      <MenuGroup id="group-one" title="Group one">
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
      </MenuGroup>
      <MenuGroup id="group-two" title="Group two">
        <MenuItem>Item 4</MenuItem>
        <MenuItem>Item 5</MenuItem>
      </MenuGroup>
    </MenuContent>
    <MenuFooter>
      <Link href="#">Manage settings</Link>
    </MenuFooter>
  </ActionMenu>
</Box>

Individual Primitive Documentation

MenuHeader

The MenuHeader is a layout component used within the menu system. It provides a consistent header structure with slots for a leftAction, rightAction, title, and optional children. It helps maintain visual and functional consistency across all menu-related components.

Extends:

Seeds System Props (TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps)
TypeStyledComponentsCommonProps
All native <div> props (except color)

Name	Type	Default	Description	Required?
`title`	`string`
`leftAction`	`React.ReactNode`
`rightAction`	`React.ReactNode`

This example demonstrates a MenuHeader with a title and left/right actions.

import { MenuHeader } from '@sproutsocial/seeds-react-menu'

<MenuHeader
  alignItems="center"
  leftAction={
    <Button
      width="24px"
      height="24px"
      display="flex"
      justifyContent="center"
      alignItems="center"
    >
      <Icon name="arrow-left" />
    </Button>
  }
  rightAction={<Link href="#">Link</Link>}
  title="Menu Title"
/>

View MenuHeader in Storybook

MenuFooter

The MenuFooter is a simple container used within the menu system to structure footer content. It accepts children and provides consistent spacing and alignment across all menus. Ideal for actions like buttons, links, or secondary info.

Extends:

(TypeBoxProps), which includes all Seeds System Props and native <div> props

This example shows a MenuFooter with a link.

import { MenuFooter } from '@sproutsocial/seeds-react-menu'

<MenuFooter>
  <Link href="#">Manage settings</Link>
</MenuFooter>

View MenuFooter in Storybook

MenuContent

MenuContent is the core container for rendering menu items. It integrates with context to handle accessibility, keyboard interactions, and ARIA roles, providing a structured way to display menu items and ensuring a consistent experience across different menu types.

Important:
The MenuContent component is required for your menu to function properly. It automatically spreads Downshift’s getMenuProps onto the underlying element, handling accessibility attributes and keyboard interactions for you. Without MenuContent, your menu will not be accessible or behave correctly.

Extends:

All native <ul> props (except children)
Supports both the menuItems prop (an array of item objects) and children (instances of MenuItem), as described in the Items List documentation. This flexible item rendering approach is also used by MenuGroup and the top-level menu components.

Name	Type	Default	Description
`innerRef`	`React.Ref<HTMLUListElement>`	`null`
`emptyStateElement`	`React.ReactNode`
`children`	`\| React.ReactChild` `\| React.ReactFragment` `\| React.ReactPortal`		Allows menu items to be passed in as children. Cannot be used with the menuItems prop.
`menuItems`	`I[]`		Allows menu items to be passed in as objects. Cannot be used with the children prop. The type of each menu item, I, must be or extend TypeMenuItemProps.
`MenuItemComponent`	`React.ComponentType<I>`		Allows a custom MenuItem component to be used when rendering using the menuItems prop. MenuItemComponent's prop type must match the type of the menuItems, I.

This example demonstrates MenuContent containing several MenuItem components.

import { MenuContent } from '@sproutsocial/seeds-react-menu'

<MenuContent>
  <MenuItem>Item 1</MenuItem>
  <MenuItem>Item 2</MenuItem>
  <MenuItem>Item 3</MenuItem>
</MenuContent>

View MenuContent in Storybook

MenuGroup

MenuGroup is a layout component used within the menu system to group related menu items. It provides a consistent structure for organizing items, enhancing readability and usability. MenuGroup can include a label and accepts children for flexible content arrangement.

Extends:

Seeds System Props
All native <ul> props (except color)
Supports both the menuItems prop (an array of item objects) and children (instances of MenuItem), as described in the Items List documentation. This flexible item rendering approach is also used by MenuContent and the top-level menu components.

Name	Type	Default	Description
`id`	`string`
`isSingleSelect`	`boolean`
`title`	`string`
`titleAs`	`\| string` `\| React.ComponentType<any>`	`"h3"`
`children`	`\| React.ReactChild` `\| React.ReactFragment` `\| React.ReactPortal`		Allows menu items to be passed in as children. Cannot be used with the menuItems prop.
`menuItems`	`I[]`		Allows menu items to be passed in as objects. Cannot be used with the children prop. The type of each menu item, I, must be or extend TypeMenuItemProps.
`MenuItemComponent`	`React.ComponentType<I>`		Allows a custom MenuItem component to be used when rendering using the menuItems prop. MenuItemComponent's prop type must match the type of the menuItems, I.

This example shows how to use MenuGroup to organize MenuItem components within MenuContent.

import { MenuGroup } from '@sproutsocial/seeds-react-menu'

<MenuContent>
  <MenuGroup id="group-one" title="Group one">
    <MenuItem>Item 1</MenuItem>
    <MenuItem>Item 2</MenuItem>
    <MenuItem>Item 3</MenuItem>
  </MenuGroup>
  <MenuGroup id="group-two" title="Group two">
    <MenuItem>Item 1</MenuItem>
    <MenuItem>Item 2</MenuItem>
    <MenuItem>Item 3</MenuItem>
  </MenuGroup>
</MenuContent>

View MenuGroup in Storybook