diff --git a/packages/components/src/navigation/stories/hide-if-empty.js b/packages/components/src/navigation/stories/hide-if-empty.js
new file mode 100644
index 0000000000000..1137dc19f8966
--- /dev/null
+++ b/packages/components/src/navigation/stories/hide-if-empty.js
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import Navigation from '..';
+import NavigationItem from '../item';
+import NavigationMenu from '../menu';
+
+export function HideIFEmptyStory() {
+	return (
+		<>
+			<Navigation>
+				<NavigationMenu title="Home" menu="root" isEmpty={ false }>
+					<NavigationItem
+						navigateToMenu="root-sub-1"
+						title="To sub 1 (hidden)"
+						hideIfTargetMenuEmpty
+					/>
+
+					<NavigationItem
+						navigateToMenu="root-sub-2"
+						title="To sub 2 (visible)"
+						hideIfTargetMenuEmpty
+					/>
+
+					<NavigationItem
+						navigateToMenu="root-sub-1-sub-1"
+						title="To sub 1-1 (hidden)"
+						hideIfTargetMenuEmpty
+					/>
+				</NavigationMenu>
+
+				<NavigationMenu
+					menu="root-sub-1"
+					parentMenu="root"
+					isEmpty={ true }
+				/>
+				<NavigationMenu
+					menu="root-sub-2"
+					parentMenu="root"
+					isEmpty={ false }
+				/>
+				<NavigationMenu
+					menu="root-sub-1-sub-1"
+					parentMenu="root-sub-1"
+					isEmpty={ true }
+				/>
+			</Navigation>
+
+			<p>
+				This story contains 3 navigation items and 4 menus. You should
+				only see one item: <strong>To sub 2 (visible)</strong>
+			</p>
+		</>
+	);
+}
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index 1bc57000c74d9..92d89dd614143 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -9,6 +9,7 @@ import NavigationMenu from '../menu';
 import { DefaultStory } from './default';
 import { ControlledStateStory } from './controlled-state';
 import { MoreExamplesStory } from './more-examples';
+import { HideIFEmptyStory } from './hide-if-empty';
 import './style.css';
 
 export default {
@@ -25,44 +26,4 @@ export default {
 export const _default = () => <DefaultStory />;
 export const controlledState = () => <ControlledStateStory />;
 export const moreExamples = () => <MoreExamplesStory />;
-
-export const Test = () => {
-	return (
-		<Navigation>
-			<NavigationMenu title="Home" menu="root" isEmpty={ false }>
-				<NavigationItem
-					navigateToMenu="root-sub-1"
-					title="To sub 1 (hidden)"
-					hideIfTargetMenuEmpty
-				/>
-
-				<NavigationItem
-					navigateToMenu="root-sub-2"
-					title="To sub 2"
-					hideIfTargetMenuEmpty
-				/>
-
-				<NavigationItem
-					navigateToMenu="root-sub-1-sub-1"
-					title="To sub 1-1 (hidden)"
-					hideIfTargetMenuEmpty
-				/>
-			</NavigationMenu>
-			<NavigationMenu
-				menu="root-sub-1"
-				parentMenu="root"
-				isEmpty={ true }
-			/>
-			<NavigationMenu
-				menu="root-sub-2"
-				parentMenu="root"
-				isEmpty={ false }
-			/>
-			<NavigationMenu
-				menu="root-sub-1-sub-1"
-				parentMenu="root-sub-1"
-				isEmpty={ true }
-			/>
-		</Navigation>
-	);
-};
+export const hideIfEmpty = () => <HideIFEmptyStory />;