Menu - New! | Seeds

Components

Menu - New!

Menu - New!

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 and higher-order components, offering a flexible system for creating a wide range of user experiences.

Higher order components

Higher-order components 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.

MenuToggleButton
MenuHeader
MenuFooter
MenuContent
MenuGroup
MenuItem
MenuLabel
MenuSearchInput
MenuSearchTokenInput

MenuToggleButton

The MenuToggleButton is a button designed to trigger the opening and closing of menus. Its props are interchangeable with .

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

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
	<ActionMenu
		menuToggleElement={
			<MenuToggleButton appearance="primary">
				I'm a MenuToggleButton
			</MenuToggleButton>
		}
	>
		<MenuContent>
			<MenuItem id="item-one">Item 1</MenuItem>
			<MenuItem id="item-two">Item 2</MenuItem>
			<MenuItem id="item-three">Item 3</MenuItem>
		</MenuContent>
	</ActionMenu>
</Box>

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.

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

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

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.

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

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

MenuContent

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

Name	Type	Default	Description
`innerRef`	`React.Ref<HTMLUListElement>`	`null`
`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.

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

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

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.

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.

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

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

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.

Name	Type	Default
`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`

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

<MenuItem>Item 1</MenuItem>

MenuLabel

MenuLabel is used to improve the accessibility of a menu by providing a text label for the menu's toggle element. MenuLabel automatically receives the necessary props to associate it with the menu toggle, so the htmlFor prop is not necessary.

Name	Type	Default	Description
`children`	`React.ReactNode`
`required`	`boolean`	`false`	Whether making a selection in the associated menu is required.
`htmlFor`	`never`		ID of the associated form element. This prop is never valid to pass into MenuLabel because MenuLabel passes its own htmlFor prop to the underlying Label component.

import { MenuLabel, MenuToggleButton } from '@sproutsocial/seeds-react-menu'

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
	<ActionMenu
		menuToggleElement={
			<>
        <MenuLabel mr={300}>Select an item:</MenuLabel>
				<MenuToggleButton>
					Open Menu
				</MenuToggleButton>
			</>
		}
	>
		<MenuContent>
			<MenuItem id="item-one">Item 1</MenuItem>
			<MenuItem id="item-two">Item 2</MenuItem>
			<MenuItem id="item-three">Item 3</MenuItem>
		</MenuContent>
	</ActionMenu>
</Box>

MenuSearchInput

MenuSearchInput is a specialized input designed for searching menus. It integrates with the menu system to filter items based on user input, providing a seamless search experience.

Name	Type	Default	Description	Required?
`getIsItemVisible`	`( item: TypeInternalItemProps, inputValue: string ) => boolean`		A function that can be passed to override the default filtering logic

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

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
		<ActionMenu
			menuToggleElement={
				<MenuToggleButton>
					Open Menu
				</MenuToggleButton>
			}
		>
			<MenuHeader>
				<MenuSearchInput
					id="action-search"
					name="search"
					type="search"
					aria-label="Search Menu"
				/>
			</MenuHeader>
			<MenuContent>
				<MenuGroup id="actions">
					<MenuItem
						onClick={(e) => alert("compose")}
						id="Compose"
					>
						Compose
					</MenuItem>
					<MenuItem
						onClick={(e) => alert("messages")}
						id="View Messages"
					>
						View Messages
					</MenuItem>
					<MenuItem
						onClick={(e) => alert("analyze")}
						id="Analyze post"
					>
						Analyze post
					</MenuItem>
				</MenuGroup>
			</MenuContent>
		</ActionMenu>
	</Box>

MenuSearchTokenInput

MenuSearchTokenInput is a specialized input that reflects user selections as tokens within the input field. It integrates with the menu system to support filtering and selection, allowing users to search, select, and view chosen items all in one place.

Name	Type	Description
`getTokenProps`	`(itemId: string) => Partial<TypeTokenSpec>`	A function that can be passed to override the default token props
`MenuContext`	`\| MenuToggleContext` `\| MenuContentContext`	Specify the menu context to use. MenuToggleContext is the default. This prop is only needed for specialized use cases.
`getIsItemVisible`	`( item: TypeInternalItemProps, inputValue: string ) => boolean`	A function that can be passed to override the default filtering logic

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

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
		<MultiSelectMenu
			menuToggleElement={
				<MenuToggleButton>
					Open Menu
				</MenuToggleButton>
			}
		>
			<MenuHeader>
				<MenuSearchTokenInput
					id="selections"
					aria-label="Select items"
				/>
			</MenuHeader>
			<MenuContent>
				<MenuGroup id="actions">
					<MenuItem id="Compose">
						Compose
					</MenuItem>
					<MenuItem id="View Messages">
						View Messages
					</MenuItem>
					<MenuItem id="Analyze post">
						Analyze post
					</MenuItem>
				</MenuGroup>
			</MenuContent>
		</MultiSelectMenu>
	</Box>