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.

NestedMenu is part of the greater Menu ecosystem.Learn more

import { NestedMenu } from '@sproutsocial/racine'

() => {

	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`
`onBackButtonClick`	`(menuId: string) => void`
`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.