diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 0b20f8e8d74c03..9f514f1f7b4604 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -30,18 +30,42 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 	};
 
 	const mapItems = ( itemData ) => {
+		const groupings = [];
 		const items = new Map(
-			[
-				{ id: 'root', parent: null, title: rootTitle },
-				...itemData,
-			].map( ( item ) => [ item.id, appendItemData( item ) ] )
+			[ { id: 'root', parent: null, title: rootTitle }, ...itemData ]
+				.filter( ( item ) => {
+					if ( item.type === 'grouping' ) {
+						item.children = [];
+						groupings.push( item );
+						return false;
+					}
+					return true;
+				} )
+				.map( ( item ) => [ item.id, appendItemData( item ) ] )
 		);
 
 		items.forEach( ( item ) => {
 			const parentItem = items.get( item.parent );
 			if ( parentItem ) {
-				parentItem.children.push( item );
-				parentItem.hasChildren = true;
+				if ( item.group ) {
+					const grouping = groupings.find(
+						( group ) => group.id === item.group
+					);
+					if ( grouping ) {
+						grouping.children.push( item );
+					}
+				} else {
+					parentItem.children.push( item );
+					parentItem.hasChildren = true;
+				}
+			}
+		} );
+
+		groupings.forEach( ( grouping ) => {
+			const parentItem = items.get( grouping.parent );
+			if ( parentItem ) {
+				parentItem.groupings = parentItem.groupings || [];
+				parentItem.groupings.push( grouping );
 			}
 		} );
 
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index ae3315bc40be91..1672226d0dc462 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -49,10 +49,23 @@ const data = [
 		id: 'child-2',
 		parent: 'item-3',
 	},
+	{
+		title: 'Secondary Menu',
+		id: 'grouping-1',
+		parent: 'item-3',
+		type: 'grouping',
+	},
 	{
 		title: 'Nested Category',
 		id: 'child-3',
 		parent: 'item-3',
+		group: 'grouping-1',
+	},
+	{
+		title: 'Child 4',
+		id: 'child-4',
+		parent: 'item-3',
+		group: 'grouping-1',
 	},
 	{
 		title: 'Sub Child 1',
@@ -82,6 +95,16 @@ const data = [
 function Example() {
 	const [ active, setActive ] = useState( 'item-1' );
 
+	const renderItem = ( item ) => (
+		<NavigationMenuItem
+			{ ...item }
+			key={ item.id }
+			onClick={
+				! item.href ? ( selected ) => setActive( selected.id ) : null
+			}
+		/>
+	);
+
 	return (
 		<>
 			{ active !== 'child-2' ? (
@@ -104,22 +127,22 @@ function Example() {
 							) }
 							<h1>{ level.title }</h1>
 							<NavigationMenu>
-								{ level.children.map( ( item ) => {
-									return (
-										<NavigationMenuItem
-											{ ...item }
-											key={ item.id }
-											onClick={
-												! item.href
-													? ( selected ) =>
-															setActive(
-																selected.id
-															)
-													: null
-											}
-										/>
-									);
-								} ) }
+								{ level.children.map( renderItem ) }
+								{ level.groupings
+									? level.groupings.map( ( grouping ) => (
+											<>
+												<h2>{ grouping.title }</h2>
+												<NavigationMenu
+													key={ grouping.id }
+													title={ grouping.title }
+												>
+													{ grouping.children.map(
+														renderItem
+													) }
+												</NavigationMenu>
+											</>
+									  ) )
+									: null }
 							</NavigationMenu>
 						</>
 					);