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
MenuTokenInput

MenuToggleButton

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

Name	Type	Default	Description	Required?
`children`	`ReactNode`

import { MenuToggleButton } from '@sproutsocial/racine'

<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/racine'

<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/racine'

<MenuFooter>
		<Button variant="primary">Primary</Button>
		<Button variant="secondary">Secondary</Button>
		<Button variant="tertiary">Tertiary</Button>
		<Button variant="ghost">Ghost</Button>
		<Button variant="link">Link</Button>
	</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	Required?
`innerRef`	`HTMLUListElement`	`null`

import { MenuFooter } from '@sproutsocial/racine'

<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
`id`	`string`
`isSingleSelect`	`boolean`
`title`	`string`
`titleAs`	`string` `React.ComponentType<any>`	`"h3"`

import { MenuGroup } from '@sproutsocial/racine'

<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`	`any`
`$highlighted`	`boolean`
`active`	`boolean`
`inputType`	`(typeof INPUT_TYPES)[keyof typeof INPUT_TYPES]`
`inputLabelId`	`string`

import { MenuItem } from '@sproutsocial/racine'

<MenuItem>Item 1</MenuItem>

MenuLabel

MenuLabel is a simple label element used to provide context or instructions within a menu. It can be paired with any content inside the menu, such as form fields or grouped items, and follows standard HTML label behavior for accessibility.

import { MenuLabel } from '@sproutsocial/racine'

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
	<ActionMenu
		menuToggleElement={
			<>
				<VisuallyHidden>
					<MenuLabel>Click an item:</MenuLabel>
				</VisuallyHidden>
				<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: TypeMenuContext["items"][number], inputValue: string ) => boolean`

import { MenuSearchInput } from '@sproutsocial/racine'

<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")}
						key={0}
						id="Compose"
					>
						Compose
					</MenuItem>
					<MenuItem
						onClick={(e) => alert("compose")}
						key={1}
						id="View Messages"
					>
						View Messages
					</MenuItem>
					<MenuItem
						onClick={(e) => alert("compose")}
						key={2}
						id="Analyze post"
					>
						Analyze post
					</MenuItem>
				</MenuGroup>
			</MenuContent>
		</ActionMenu>
	</Box>

MenuTokenInput

MenuTokenInput 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	Default	Description	Required?
`getTokenProps`	`( itemId: TypeInternalItemProps["id"] ) => Partial<TypeTokenSpec>`
`MenuContext`	`MenuToggleContext` `MenuContentContext`	`createContext<TypeMenuToggleContext>(defaultMenuContext)`

import { MenuTokenInput } from '@sproutsocial/racine'

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
		<Autocomplete
			itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
			menuToggleElement={
				<FormField
					width="50%"
					label={
						<MenuLabel htmlFor="my-combobox" mb={300}>
							Choose a book
						</MenuLabel>
					}
				>
					{ props => <AutocompleteTokenInput {...props} /> }
				</FormField>
			}
			onStateChange={(changes) => changes}
      multiSelect
		>
			<MenuContent>
				{TEST_BOOKS.map(({ id, title }) => (
					<MenuItem key={id} id={id}>
						{title}
					</MenuItem>
				))}
			</MenuContent>
		</Autocomplete>
	</Box>