Nested Menu

Components

Nested Menu

Code

A Nested Menus allows users to navigate grouped or hierarchical options within a single Popout.

Unlike traditional submenus that appear progressively across multiple layers, all nested levels are contained and managed within one menu surface. This approach keeps the experience compact and easier to scan, while still supporting complex option structures.

View NestedMenu in Storybook

NestedMenu is part of the Menu ecosystem. For use cases that are common across all menu types, such as keyboard navigation, accessibility, and menu positioning, see the Menu package documentation.

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

() => {

	const menus = {
		root: {
			MenuComponent: ActionMenu,
			menuProps: {
				menuItems: [
					{
						id: "parent-1",
						children: "Open inner menu",
						childMenuId: "inner",
					},
					{
						id: "other-root",
						children: "No child menu",
					},
				],
			},
			MenuHeaderComponent: null,
		},
		inner: {
			MenuComponent: ActionMenu,
			menuProps: {
				children: (
					<NestedMenuContent>
						<NestedMenuItem
							id="item-2"
							children="Books as ActionMenu"
							childMenuId="books-action"
						/>
						<NestedMenuItem
							id="item-3"
							children="Books as MultiSelect"
							childMenuId="books-multiselect"
						/>
						<NestedMenuItem
							id="item-4"
							children="Books as SingleSelect"
							childMenuId="books-select"
						/>
					</NestedMenuContent>
				),
			},
			menuHeaderProps: {
				title: "Inner Menu",
			},
		},
		"books-action": {
			MenuComponent: ActionMenu,
			menuProps: {
				menuItems: TEST_BOOKS.map((book) => ({
					id: book.id,
					children: book.title,
					childMenuId: "edit-book",
				})),
			},
			menuHeaderProps: {
				title: "Manage Books",
			},
		},
		"books-multiselect": {
			MenuComponent: MultiSelectMenu,
			menuProps: {
				menuItems: TEST_BOOKS.map((book) => ({
					id: book.id,
					children: book.title,
				})),
			},
			menuHeaderProps: {
				title: "Select Books",
			},
		},
		"books-select": {
			MenuComponent: SingleSelectMenu,
			menuProps: {
				menuItems: TEST_BOOKS.map((book) => ({
					id: book.id,
					children: book.title,
				})),
			},
			menuHeaderProps: {
				title: "Select One Book",
			},
		},
		"edit-book": {
			MenuComponent: ActionMenu,
			menuProps: {
				menuItems: [
					{
						id: "archive",
						children: "Archive",
					},
					{
						id: "delete",
						children: "Delete",
					},
				],
			},
			menuHeaderProps: {
				title: "Edit Book",
				backArrowLabel: "Back to Books",
			},
		},
	};

	return (
		<Box display="flex" justifyContent="center" alignItems="center" height="100%">
			<NestedMenu
        initialMenuId="root"
        menus={menus}
        backArrowLabel="Go Back"
        menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
      />
		</Box>
	)
}

Properties

Name	Type	Description
`initialMenuId`	`string`	The id of the menu to display when the NestedMenu is opened.
`onBackButtonClick`	`(menuId: string) => void`	An optional callback to fire when the back button is clicked.
`backArrowLabel`	`string`	Sets the default localized label for the back arrow in all child menus. This label can be overridden by including backArrowLabel in a menu's menuHeaderProps.
`menus`	`{ [id: string]: \| TypeNestedMenuMapProps<TypeActionMenuProps<I>, I> \| TypeNestedMenuMapProps<TypeSingleSelectMenuProps<I>, I> \| TypeNestedMenuMapProps<TypeMultiSelectMenuProps<I>, I>; }`	An object of the menus and child menus to be displayed, keyed by id.