diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
index 2ef74b122d314d..4ebaf1172bb810 100644
--- a/packages/components/src/navigation/README.md
+++ b/packages/components/src/navigation/README.md
@@ -99,7 +99,7 @@ Optional className for the `NavigationMenu` component.
 -   Required: No
 -   Default: "root"
 
-The menu slug.
+The unique identifier of the menu. The root menu can omit this, and it will default to "root"; all other menus need to specify it.
 
 ### `parentMenu`
 
@@ -158,6 +158,13 @@ Optional className for the `NavigationItem` component.
 
 If provided, renders `a` instead of `button`.
 
+### `item`
+
+-   Type: `string`
+-   Required: Yes
+
+The unique identifier of the item.
+
 ### `navigateToMenu`
 
 -   Type: `string`
diff --git a/packages/components/src/navigation/context.js b/packages/components/src/navigation/context.js
index ac057888a81802..c283c3899a89fe 100644
--- a/packages/components/src/navigation/context.js
+++ b/packages/components/src/navigation/context.js
@@ -17,5 +17,17 @@ export const NavigationContext = createContext( {
 	activeItem: undefined,
 	activeMenu: ROOT_MENU,
 	setActiveMenu: noop,
+
+	navigationTree: {
+		items: {},
+		getItem: noop,
+		addItem: noop,
+		removeItem: noop,
+
+		menus: {},
+		getMenu: noop,
+		addMenu: noop,
+		removeMenu: noop,
+	},
 } );
 export const useNavigationContext = () => useContext( NavigationContext );
diff --git a/packages/components/src/navigation/group.js b/packages/components/src/navigation/group/index.js
similarity index 61%
rename from packages/components/src/navigation/group.js
rename to packages/components/src/navigation/group/index.js
index a1293d0c65a077..ba2b3a2ad13b91 100644
--- a/packages/components/src/navigation/group.js
+++ b/packages/components/src/navigation/group/index.js
@@ -6,9 +6,17 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { GroupTitleUI } from './styles/navigation-styles';
+import { GroupTitleUI } from '../styles/navigation-styles';
+import { useNavigationMenuContext } from '../menu/context';
 
 export default function NavigationGroup( { children, className, title } ) {
+	const { isActive } = useNavigationMenuContext();
+
+	// Keep the children rendered to make sure inactive items are included in the navigation tree
+	if ( ! isActive ) {
+		return children;
+	}
+
 	const classes = classnames( 'components-navigation__group', className );
 
 	return (
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index f5742def52763f..4919eca4861d67 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -16,6 +16,7 @@ import Animate from '../animate';
 import { ROOT_MENU } from './constants';
 import { NavigationContext } from './context';
 import { NavigationUI } from './styles/navigation-styles';
+import { useCreateNavigationTree } from './use-create-navigation-tree';
 
 export default function Navigation( {
 	activeItem,
@@ -26,6 +27,7 @@ export default function Navigation( {
 } ) {
 	const [ menu, setMenu ] = useState( activeMenu );
 	const [ slideOrigin, setSlideOrigin ] = useState();
+	const navigationTree = useCreateNavigationTree();
 
 	const setActiveMenu = ( menuId, slideInOrigin = 'left' ) => {
 		setSlideOrigin( slideInOrigin );
@@ -51,6 +53,7 @@ export default function Navigation( {
 		activeItem,
 		activeMenu: menu,
 		setActiveMenu,
+		navigationTree,
 	};
 
 	const classes = classnames( 'components-navigation', className );
diff --git a/packages/components/src/navigation/item.js b/packages/components/src/navigation/item/index.js
similarity index 54%
rename from packages/components/src/navigation/item.js
rename to packages/components/src/navigation/item/index.js
index 33cb7ae48c48bc..53aab5ff75acb0 100644
--- a/packages/components/src/navigation/item.js
+++ b/packages/components/src/navigation/item/index.js
@@ -12,22 +12,34 @@ import { Icon, chevronRight } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import { useNavigationContext } from './context';
-import { ItemBadgeUI, ItemTitleUI, ItemUI } from './styles/navigation-styles';
+import Button from '../../button';
+import { useNavigationContext } from '../context';
+import { ItemBadgeUI, ItemTitleUI, ItemUI } from '../styles/navigation-styles';
+import { useNavigationTreeItem } from './use-navigation-tree-item';
+import { useNavigationMenuContext } from '../menu/context';
 
-export default function NavigationItem( {
-	badge,
-	children,
-	className,
-	href,
-	item,
-	navigateToMenu,
-	onClick = noop,
-	title,
-	...props
-} ) {
+export default function NavigationItem( props ) {
+	const {
+		badge,
+		children,
+		className,
+		href,
+		item,
+		navigateToMenu,
+		onClick = noop,
+		title,
+		...restProps
+	} = props;
+	useNavigationTreeItem( props );
 	const { activeItem, setActiveMenu } = useNavigationContext();
+	const { isActive } = useNavigationMenuContext();
+
+	// If this item is in an inactive menu, then we skip rendering
+	// We need to make sure this component gets mounted though
+	// To make sure inactive items are included in the navigation tree
+	if ( ! isActive ) {
+		return null;
+	}
 
 	const classes = classnames( 'components-navigation__item', className, {
 		'is-active': item && activeItem === item,
@@ -44,7 +56,7 @@ export default function NavigationItem( {
 	return (
 		<ItemUI className={ classes }>
 			{ children || (
-				<Button href={ href } onClick={ onItemClick } { ...props }>
+				<Button href={ href } onClick={ onItemClick } { ...restProps }>
 					{ title && (
 						<ItemTitleUI
 							className="components-navigation__item-title"
diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js
new file mode 100644
index 00000000000000..b501da08d08b68
--- /dev/null
+++ b/packages/components/src/navigation/item/use-navigation-tree-item.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { useNavigationMenuContext } from '../menu/context';
+
+export const useNavigationTreeItem = ( props ) => {
+	const {
+		navigationTree: { addItem, removeItem },
+	} = useNavigationContext();
+	const { menu } = useNavigationMenuContext();
+
+	const key = props.item;
+	useEffect( () => {
+		addItem( key, { ...props, menu } );
+
+		return () => {
+			removeItem( key );
+		};
+	}, [] );
+};
diff --git a/packages/components/src/navigation/menu.js b/packages/components/src/navigation/menu.js
deleted file mode 100644
index 203f50425b6594..00000000000000
--- a/packages/components/src/navigation/menu.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, chevronLeft } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { ROOT_MENU } from './constants';
-import { useNavigationContext } from './context';
-import {
-	MenuBackButtonUI,
-	MenuTitleUI,
-	MenuUI,
-} from './styles/navigation-styles';
-
-export default function NavigationMenu( {
-	backButtonLabel,
-	children,
-	className,
-	menu = ROOT_MENU,
-	parentMenu,
-	title,
-} ) {
-	const { activeMenu, setActiveMenu } = useNavigationContext();
-
-	if ( activeMenu !== menu ) {
-		return null;
-	}
-
-	const classes = classnames( 'components-navigation__menu', className );
-
-	return (
-		<MenuUI className={ classes }>
-			{ parentMenu && (
-				<MenuBackButtonUI
-					className="components-navigation__back-button"
-					isTertiary
-					onClick={ () => setActiveMenu( parentMenu, 'right' ) }
-				>
-					<Icon icon={ chevronLeft } />
-					{ backButtonLabel || __( 'Back' ) }
-				</MenuBackButtonUI>
-			) }
-			{ title && (
-				<MenuTitleUI
-					as="h2"
-					className="components-navigation__menu-title"
-					variant="subtitle"
-				>
-					{ title }
-				</MenuTitleUI>
-			) }
-			<ul>{ children }</ul>
-		</MenuUI>
-	);
-}
diff --git a/packages/components/src/navigation/menu/context.js b/packages/components/src/navigation/menu/context.js
new file mode 100644
index 00000000000000..485ceec98c14ec
--- /dev/null
+++ b/packages/components/src/navigation/menu/context.js
@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const NavigationMenuContext = createContext( {
+	menu: undefined,
+	isActive: false,
+} );
+export const useNavigationMenuContext = () =>
+	useContext( NavigationMenuContext );
diff --git a/packages/components/src/navigation/menu/index.js b/packages/components/src/navigation/menu/index.js
new file mode 100644
index 00000000000000..f7f885c497bec0
--- /dev/null
+++ b/packages/components/src/navigation/menu/index.js
@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ROOT_MENU } from '../constants';
+import { useNavigationContext } from '../context';
+import {
+	MenuBackButtonUI,
+	MenuTitleUI,
+	MenuUI,
+} from '../styles/navigation-styles';
+import { NavigationMenuContext } from './context';
+import { useNavigationTreeMenu } from './use-navigation-tree-menu';
+
+export default function NavigationMenu( props ) {
+	const {
+		backButtonLabel,
+		children,
+		className,
+		menu = ROOT_MENU,
+		parentMenu,
+		title,
+	} = props;
+	useNavigationTreeMenu( props );
+	const { activeMenu, setActiveMenu } = useNavigationContext();
+	const isActive = activeMenu === menu;
+
+	const classes = classnames( 'components-navigation__menu', className );
+
+	const context = {
+		menu,
+		isActive,
+	};
+
+	// Keep the children rendered to make sure inactive items are included in the navigation tree
+	if ( ! isActive ) {
+		return (
+			<NavigationMenuContext.Provider value={ context }>
+				{ children }
+			</NavigationMenuContext.Provider>
+		);
+	}
+
+	return (
+		<NavigationMenuContext.Provider value={ context }>
+			<MenuUI className={ classes }>
+				{ parentMenu && (
+					<MenuBackButtonUI
+						className="components-navigation__back-button"
+						isTertiary
+						onClick={ () => setActiveMenu( parentMenu, 'right' ) }
+					>
+						<Icon icon={ chevronLeft } />
+						{ backButtonLabel || __( 'Back' ) }
+					</MenuBackButtonUI>
+				) }
+				{ title && (
+					<MenuTitleUI
+						as="h2"
+						className="components-navigation__menu-title"
+						variant="subtitle"
+					>
+						{ title }
+					</MenuTitleUI>
+				) }
+				<ul>{ children }</ul>
+			</MenuUI>
+		</NavigationMenuContext.Provider>
+	);
+}
diff --git a/packages/components/src/navigation/menu/use-navigation-tree-menu.js b/packages/components/src/navigation/menu/use-navigation-tree-menu.js
new file mode 100644
index 00000000000000..3642043532de9e
--- /dev/null
+++ b/packages/components/src/navigation/menu/use-navigation-tree-menu.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { ROOT_MENU } from '../constants';
+
+export const useNavigationTreeMenu = ( props ) => {
+	const {
+		navigationTree: { addMenu, removeMenu },
+	} = useNavigationContext();
+
+	const key = props.menu || ROOT_MENU;
+	useEffect( () => {
+		addMenu( key, { ...props, menu: key } );
+
+		return () => {
+			removeMenu( key );
+		};
+	}, [] );
+};
diff --git a/packages/components/src/navigation/use-create-navigation-tree.js b/packages/components/src/navigation/use-create-navigation-tree.js
new file mode 100644
index 00000000000000..52414e540dd624
--- /dev/null
+++ b/packages/components/src/navigation/use-create-navigation-tree.js
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import { useNavigationTreeNodes } from './use-navigation-tree-nodes';
+
+export const useCreateNavigationTree = () => {
+	const {
+		nodes: items,
+		getNode: getItem,
+		addNode: addItem,
+		removeNode: removeItem,
+	} = useNavigationTreeNodes();
+
+	const {
+		nodes: menus,
+		getNode: getMenu,
+		addNode: addMenu,
+		removeNode: removeMenu,
+	} = useNavigationTreeNodes();
+
+	return {
+		items,
+		getItem,
+		addItem,
+		removeItem,
+
+		menus,
+		getMenu,
+		addMenu,
+		removeMenu,
+	};
+};
diff --git a/packages/components/src/navigation/use-navigation-tree-nodes.js b/packages/components/src/navigation/use-navigation-tree-nodes.js
new file mode 100644
index 00000000000000..c07b88260ee4a2
--- /dev/null
+++ b/packages/components/src/navigation/use-navigation-tree-nodes.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+export const useNavigationTreeNodes = () => {
+	const [ nodes, setNodes ] = useState( {} );
+
+	const getNode = ( key ) => nodes[ key ];
+
+	const addNode = ( key, value ) =>
+		setNodes( ( original ) => ( {
+			...original,
+			[ key ]: omit( value, 'children' ),
+		} ) );
+
+	const removeNode = ( key ) =>
+		setNodes( ( original ) => omit( original, key ) );
+
+	return { nodes, getNode, addNode, removeNode };
+};