From 0e0bb0c4482c793f08f7bbfd9b034959bd74a72b Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 22 Jul 2020 13:16:38 +1200
Subject: [PATCH 01/13] Initial working tree display

---
 packages/components/src/navigation/index.js   | 45 ++++++++++++++++
 packages/components/src/navigation/item.js    | 22 ++++++++
 .../src/navigation/stories/index.js           | 54 +++++++++++++++++++
 3 files changed, 121 insertions(+)
 create mode 100644 packages/components/src/navigation/index.js
 create mode 100644 packages/components/src/navigation/item.js
 create mode 100644 packages/components/src/navigation/stories/index.js

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
new file mode 100644
index 00000000000000..68515bf8f0efb3
--- /dev/null
+++ b/packages/components/src/navigation/index.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import Text from '../text';
+import Item from './item';
+
+const Navigation = ( { data, initial } ) => {
+	const initialActive = data.find( ( item ) => item.slug === initial );
+	const [ active, setActive ] = useState( initialActive );
+	const parent = data.find( ( item ) => item.slug === active.parent );
+	const items = data.filter( ( item ) => item.parent === active.parent );
+
+	const goBack = () => {
+		const parentalSiblings = data.filter(
+			( item ) => item.parent === parent.parent
+		);
+		setActive( parentalSiblings[ 0 ] );
+	};
+
+	return (
+		<>
+			<Button onClick={ goBack } isPrimary>
+				{ parent.back }
+			</Button>
+			<Text variant="title.large">{ parent.title }</Text>
+			{ items.map( ( item ) => (
+				<Item
+					key={ item.slug }
+					data={ data }
+					item={ item }
+					setActive={ setActive }
+					isActive={ item.slug === active.slug }
+				/>
+			) ) }
+		</>
+	);
+};
+
+export default Navigation;
diff --git a/packages/components/src/navigation/item.js b/packages/components/src/navigation/item.js
new file mode 100644
index 00000000000000..b48e2e9a59f425
--- /dev/null
+++ b/packages/components/src/navigation/item.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+
+const Item = ( { data, item, setActive, isActive } ) => {
+	const onSelect = () => {
+		const children = data.filter( ( d ) => d.parent === item.slug );
+		if ( children.length ) {
+			setActive( children[ 0 ] );
+		} else {
+			setActive( item );
+		}
+	};
+	return (
+		<Button isSecondary={ isActive } onClick={ onSelect } key={ item.slug }>
+			{ item.title }
+		</Button>
+	);
+};
+
+export default Item;
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
new file mode 100644
index 00000000000000..c8613339acf2f0
--- /dev/null
+++ b/packages/components/src/navigation/stories/index.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import Navigation from '../';
+
+export default {
+	title: 'Components/Navigation',
+	component: Navigation,
+};
+
+const data = [
+	{ title: 'WooCommerce', slug: 'root', back: 'Dashboard' },
+	{ title: 'Home', slug: 'home', parent: 'root' },
+	{
+		title: 'Analytics',
+		slug: 'analytics',
+		parent: 'root',
+		back: 'WooCommerce Home',
+	},
+	{
+		title: 'Orders',
+		slug: 'orders',
+		parent: 'root',
+		back: 'WooCommerce Home',
+	},
+	{
+		title: 'Overview',
+		slug: 'overview',
+		parent: 'analytics',
+	},
+	{
+		title: 'Products report',
+		slug: 'products',
+		parent: 'analytics',
+	},
+	{
+		title: 'All orders',
+		slug: 'all_orders',
+		parent: 'orders',
+	},
+	{
+		title: 'Payouts',
+		slug: 'payouts',
+		parent: 'orders',
+	},
+];
+
+function Example() {
+	return <Navigation data={ data } initial="home" />;
+}
+
+export const _default = () => {
+	return <Example />;
+};

From 016bd6956fb1a666ab39610f383d26793bb0c4d7 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 22 Jul 2020 13:46:59 +1200
Subject: [PATCH 02/13] add styles

---
 packages/components/src/navigation/index.js   | 34 ++++++++++++-------
 packages/components/src/navigation/item.js    | 25 ++++++++++----
 packages/components/src/navigation/style.scss | 17 ++++++++++
 packages/components/src/style.scss            |  1 +
 4 files changed, 58 insertions(+), 19 deletions(-)
 create mode 100644 packages/components/src/navigation/style.scss

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 68515bf8f0efb3..5cee46c8ac49aa 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { Icon, arrowLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,28 +18,37 @@ const Navigation = ( { data, initial } ) => {
 	const items = data.filter( ( item ) => item.parent === active.parent );
 
 	const goBack = () => {
+		if ( ! parent.parent ) {
+			// We are at top level, will need to handle this case.
+			return;
+		}
 		const parentalSiblings = data.filter(
 			( item ) => item.parent === parent.parent
 		);
-		setActive( parentalSiblings[ 0 ] );
+		if ( parentalSiblings.length ) {
+			setActive( parentalSiblings[ 0 ] );
+		}
 	};
 
 	return (
-		<>
+		<div className="components-navigation">
 			<Button onClick={ goBack } isPrimary>
+				<Icon icon={ arrowLeft } />
 				{ parent.back }
 			</Button>
 			<Text variant="title.large">{ parent.title }</Text>
-			{ items.map( ( item ) => (
-				<Item
-					key={ item.slug }
-					data={ data }
-					item={ item }
-					setActive={ setActive }
-					isActive={ item.slug === active.slug }
-				/>
-			) ) }
-		</>
+			<div className="components-navigation-items">
+				{ items.map( ( item ) => (
+					<Item
+						key={ item.slug }
+						data={ data }
+						item={ item }
+						setActive={ setActive }
+						isActive={ item.slug === active.slug }
+					/>
+				) ) }
+			</div>
+		</div>
 	);
 };
 
diff --git a/packages/components/src/navigation/item.js b/packages/components/src/navigation/item.js
index b48e2e9a59f425..18849fffac8e7b 100644
--- a/packages/components/src/navigation/item.js
+++ b/packages/components/src/navigation/item.js
@@ -1,20 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronRight } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import Button from '../button';
 
 const Item = ( { data, item, setActive, isActive } ) => {
+	const children = data.filter( ( d ) => d.parent === item.slug );
 	const onSelect = () => {
-		const children = data.filter( ( d ) => d.parent === item.slug );
-		if ( children.length ) {
-			setActive( children[ 0 ] );
-		} else {
-			setActive( item );
-		}
+		const next = children.length ? children[ 0 ] : item;
+		setActive( next );
 	};
+	const classes = classnames( 'components-navigation-item', {
+		'is-active': isActive,
+	} );
 	return (
-		<Button isSecondary={ isActive } onClick={ onSelect } key={ item.slug }>
+		<Button className={ classes } onClick={ onSelect } key={ item.slug }>
 			{ item.title }
+			{ children.length ? <Icon icon={ chevronRight } /> : null }
 		</Button>
 	);
 };
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
new file mode 100644
index 00000000000000..98fb5ebabac0ca
--- /dev/null
+++ b/packages/components/src/navigation/style.scss
@@ -0,0 +1,17 @@
+.components-navigation {
+	max-width: 250px;
+}
+
+.components-navigation-items {
+	display: flex;
+	flex-direction: column;
+}
+
+.components-navigation-item {
+	display: flex;
+	justify-content: space-between;
+
+	&.is-active {
+		border-bottom: 2px solid var(--wp-admin-theme-color);
+	}
+}
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 36c406c3c7a414..3066b604428cc5 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -29,6 +29,7 @@
 @import "./menu-item/style.scss";
 @import "./menu-items-choice/style.scss";
 @import "./modal/style.scss";
+@import "./navigation/style.scss";
 @import "./notice/style.scss";
 @import "./panel/style.scss";
 @import "./placeholder/style.scss";

From c92fb80be08adb9fb9fbb0920948f64ff5b56d11 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 22 Jul 2020 14:15:22 +1200
Subject: [PATCH 03/13] add styles

---
 packages/components/src/navigation/index.js   | 10 ++++++++--
 packages/components/src/navigation/item.js    |  5 ++++-
 packages/components/src/navigation/style.scss | 14 ++++++++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 5cee46c8ac49aa..29da72a8349ab6 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -32,11 +32,17 @@ const Navigation = ( { data, initial } ) => {
 
 	return (
 		<div className="components-navigation">
-			<Button onClick={ goBack } isPrimary>
+			<Button
+				className="components-navigation-back"
+				onClick={ goBack }
+				isPrimary
+			>
 				<Icon icon={ arrowLeft } />
 				{ parent.back }
 			</Button>
-			<Text variant="title.large">{ parent.title }</Text>
+			<div className="components-navigation-title">
+				<Text variant="title.medium">{ parent.title }</Text>
+			</div>
 			<div className="components-navigation-items">
 				{ items.map( ( item ) => (
 					<Item
diff --git a/packages/components/src/navigation/item.js b/packages/components/src/navigation/item.js
index 18849fffac8e7b..92cd3a735629ad 100644
--- a/packages/components/src/navigation/item.js
+++ b/packages/components/src/navigation/item.js
@@ -12,6 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
+import Text from '../text';
 
 const Item = ( { data, item, setActive, isActive } ) => {
 	const children = data.filter( ( d ) => d.parent === item.slug );
@@ -24,7 +25,9 @@ const Item = ( { data, item, setActive, isActive } ) => {
 	} );
 	return (
 		<Button className={ classes } onClick={ onSelect } key={ item.slug }>
-			{ item.title }
+			<Text variant="body.small">
+				<span>{ item.title }</span>
+			</Text>
 			{ children.length ? <Icon icon={ chevronRight } /> : null }
 		</Button>
 	);
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index 98fb5ebabac0ca..25cfcf1232aa9f 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -1,5 +1,14 @@
 .components-navigation {
-	max-width: 250px;
+	width: 272px;
+	padding: 35px 30px;
+}
+
+.components-navigation-back {
+	margin-bottom: 64px;
+}
+
+.components-navigation-title {
+	margin-bottom: 24px;
 }
 
 .components-navigation-items {
@@ -10,8 +19,9 @@
 .components-navigation-item {
 	display: flex;
 	justify-content: space-between;
+	margin-left: -12px;
 
-	&.is-active {
+	&.is-active span {
 		border-bottom: 2px solid var(--wp-admin-theme-color);
 	}
 }

From 60fa5f2aa6dab9560f6cf1f6ab578911249f1a3a Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 22 Jul 2020 15:33:42 +1200
Subject: [PATCH 04/13] dark theme

---
 packages/components/src/navigation/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index 25cfcf1232aa9f..c4575b8238bc2a 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -1,10 +1,15 @@
 .components-navigation {
 	width: 272px;
 	padding: 35px 30px;
+	background: #191e23;
+	color: #ccd0d4;
 }
 
 .components-navigation-back {
 	margin-bottom: 64px;
+	background-color: #23282d;
+	padding: 3px 6px;
+	color: #ccd0d4;
 }
 
 .components-navigation-title {
@@ -20,6 +25,7 @@
 	display: flex;
 	justify-content: space-between;
 	margin-left: -12px;
+	color: #8f98a1;
 
 	&.is-active span {
 		border-bottom: 2px solid var(--wp-admin-theme-color);

From 647f3328818dd820531b0a81b437a51521b9ebd9 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 22 Jul 2020 15:34:21 +1200
Subject: [PATCH 05/13] back button

---
 packages/components/src/navigation/index.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 29da72a8349ab6..2bd3ff2130c0ac 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -32,11 +32,7 @@ const Navigation = ( { data, initial } ) => {
 
 	return (
 		<div className="components-navigation">
-			<Button
-				className="components-navigation-back"
-				onClick={ goBack }
-				isPrimary
-			>
+			<Button className="components-navigation-back" onClick={ goBack }>
 				<Icon icon={ arrowLeft } />
 				{ parent.back }
 			</Button>

From be4c22457a1f7273403a1ae501ece2c2b4c4d039 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Wed, 22 Jul 2020 16:17:01 +1200
Subject: [PATCH 06/13] secondary

---
 packages/components/src/navigation/index.js   | 33 +++++++++++++-----
 .../src/navigation/stories/index.js           | 34 +++++++++++++++++++
 packages/components/src/navigation/style.scss |  3 +-
 3 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 2bd3ff2130c0ac..939fac7637ac6e 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -40,15 +40,30 @@ const Navigation = ( { data, initial } ) => {
 				<Text variant="title.medium">{ parent.title }</Text>
 			</div>
 			<div className="components-navigation-items">
-				{ items.map( ( item ) => (
-					<Item
-						key={ item.slug }
-						data={ data }
-						item={ item }
-						setActive={ setActive }
-						isActive={ item.slug === active.slug }
-					/>
-				) ) }
+				{ items.map( ( item ) =>
+					! item.isSecondary ? (
+						<Item
+							key={ item.slug }
+							data={ data }
+							item={ item }
+							setActive={ setActive }
+							isActive={ item.slug === active.slug }
+						/>
+					) : null
+				) }
+			</div>
+			<div className="components-navigation-items is-secondary">
+				{ items.map( ( item ) =>
+					item.isSecondary ? (
+						<Item
+							key={ item.slug }
+							data={ data }
+							item={ item }
+							setActive={ setActive }
+							isActive={ item.slug === active.slug }
+						/>
+					) : null
+				) }
 			</div>
 		</div>
 	);
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index c8613339acf2f0..9c63b425b4c25c 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -43,6 +43,40 @@ const data = [
 		slug: 'payouts',
 		parent: 'orders',
 	},
+	{
+		title: 'Settings',
+		slug: 'settings',
+		parent: 'root',
+		back: 'WooCommerce Home',
+		isSecondary: true,
+	},
+	{
+		title: 'Extensions',
+		slug: 'extensions',
+		parent: 'root',
+		back: 'WooCommerce Home',
+		isSecondary: true,
+	},
+	{
+		title: 'General',
+		slug: 'general',
+		parent: 'settings',
+	},
+	{
+		title: 'Tax',
+		slug: 'tax',
+		parent: 'settings',
+	},
+	{
+		title: 'My extensions',
+		slug: 'my_extensions',
+		parent: 'extensions',
+	},
+	{
+		title: 'Marketplace',
+		slug: 'marketplace',
+		parent: 'extensions',
+	},
 ];
 
 function Example() {
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index c4575b8238bc2a..2af9c2a41ea5a3 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -13,7 +13,8 @@
 }
 
 .components-navigation-title {
-	margin-bottom: 24px;
+	// For now
+	margin-bottom: 40px;
 }
 
 .components-navigation-items {

From ff2a1693650b85d365e13ca45ec42aa218ddb0da Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Thu, 23 Jul 2020 13:22:24 +1200
Subject: [PATCH 07/13] BEM style classnames

---
 packages/components/src/navigation/index.js   | 8 ++++----
 packages/components/src/navigation/item.js    | 2 +-
 packages/components/src/navigation/style.scss | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 939fac7637ac6e..42a9106327a392 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -32,14 +32,14 @@ const Navigation = ( { data, initial } ) => {
 
 	return (
 		<div className="components-navigation">
-			<Button className="components-navigation-back" onClick={ goBack }>
+			<Button className="components-navigation__back" onClick={ goBack }>
 				<Icon icon={ arrowLeft } />
 				{ parent.back }
 			</Button>
-			<div className="components-navigation-title">
+			<div className="components-navigation__title">
 				<Text variant="title.medium">{ parent.title }</Text>
 			</div>
-			<div className="components-navigation-items">
+			<div className="components-navigation__menu-items">
 				{ items.map( ( item ) =>
 					! item.isSecondary ? (
 						<Item
@@ -52,7 +52,7 @@ const Navigation = ( { data, initial } ) => {
 					) : null
 				) }
 			</div>
-			<div className="components-navigation-items is-secondary">
+			<div className="components-navigation__menu-items is-secondary">
 				{ items.map( ( item ) =>
 					item.isSecondary ? (
 						<Item
diff --git a/packages/components/src/navigation/item.js b/packages/components/src/navigation/item.js
index 92cd3a735629ad..b3453dbbf99793 100644
--- a/packages/components/src/navigation/item.js
+++ b/packages/components/src/navigation/item.js
@@ -20,7 +20,7 @@ const Item = ( { data, item, setActive, isActive } ) => {
 		const next = children.length ? children[ 0 ] : item;
 		setActive( next );
 	};
-	const classes = classnames( 'components-navigation-item', {
+	const classes = classnames( 'components-navigation__menu-item', {
 		'is-active': isActive,
 	} );
 	return (
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index 2af9c2a41ea5a3..889a8db8832dea 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -5,24 +5,24 @@
 	color: #ccd0d4;
 }
 
-.components-navigation-back {
+.components-navigation__back {
 	margin-bottom: 64px;
 	background-color: #23282d;
 	padding: 3px 6px;
 	color: #ccd0d4;
 }
 
-.components-navigation-title {
+.components-navigation__title {
 	// For now
 	margin-bottom: 40px;
 }
 
-.components-navigation-items {
+.components-navigation__menu-items {
 	display: flex;
 	flex-direction: column;
 }
 
-.components-navigation-item {
+.components-navigation__menu-item {
 	display: flex;
 	justify-content: space-between;
 	margin-left: -12px;

From 7ff8479c7edb27e7e903eeb09eb375157745b1e7 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Thu, 23 Jul 2020 13:32:26 +1200
Subject: [PATCH 08/13] remove back button styles

---
 packages/components/src/navigation/index.js   | 6 +++++-
 packages/components/src/navigation/style.scss | 3 ---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 42a9106327a392..0c953306106e83 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -32,7 +32,11 @@ const Navigation = ( { data, initial } ) => {
 
 	return (
 		<div className="components-navigation">
-			<Button className="components-navigation__back" onClick={ goBack }>
+			<Button
+				isPrimary
+				className="components-navigation__back"
+				onClick={ goBack }
+			>
 				<Icon icon={ arrowLeft } />
 				{ parent.back }
 			</Button>
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index 889a8db8832dea..ead4241754de5a 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -7,9 +7,6 @@
 
 .components-navigation__back {
 	margin-bottom: 64px;
-	background-color: #23282d;
-	padding: 3px 6px;
-	color: #ccd0d4;
 }
 
 .components-navigation__title {

From 7ce0d8a09fb783c7f51bccd7de1cad184b6272a8 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Thu, 23 Jul 2020 13:50:25 +1200
Subject: [PATCH 09/13] add menu: 'primary' data propery

---
 packages/components/src/navigation/index.js         | 4 ++--
 packages/components/src/navigation/stories/index.js | 8 +++++---
 packages/components/src/navigation/style.scss       | 5 +++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 0c953306106e83..029f9138ffe286 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -45,7 +45,7 @@ const Navigation = ( { data, initial } ) => {
 			</div>
 			<div className="components-navigation__menu-items">
 				{ items.map( ( item ) =>
-					! item.isSecondary ? (
+					item.menu === 'primary' ? (
 						<Item
 							key={ item.slug }
 							data={ data }
@@ -58,7 +58,7 @@ const Navigation = ( { data, initial } ) => {
 			</div>
 			<div className="components-navigation__menu-items is-secondary">
 				{ items.map( ( item ) =>
-					item.isSecondary ? (
+					item.menu === 'secondary' ? (
 						<Item
 							key={ item.slug }
 							data={ data }
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index 9c63b425b4c25c..ede16f3046136f 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -10,18 +10,20 @@ export default {
 
 const data = [
 	{ title: 'WooCommerce', slug: 'root', back: 'Dashboard' },
-	{ title: 'Home', slug: 'home', parent: 'root' },
+	{ title: 'Home', slug: 'home', parent: 'root', menu: 'primary' },
 	{
 		title: 'Analytics',
 		slug: 'analytics',
 		parent: 'root',
 		back: 'WooCommerce Home',
+		menu: 'primary',
 	},
 	{
 		title: 'Orders',
 		slug: 'orders',
 		parent: 'root',
 		back: 'WooCommerce Home',
+		menu: 'primary',
 	},
 	{
 		title: 'Overview',
@@ -48,14 +50,14 @@ const data = [
 		slug: 'settings',
 		parent: 'root',
 		back: 'WooCommerce Home',
-		isSecondary: true,
+		menu: 'secondary',
 	},
 	{
 		title: 'Extensions',
 		slug: 'extensions',
 		parent: 'root',
 		back: 'WooCommerce Home',
-		isSecondary: true,
+		menu: 'secondary',
 	},
 	{
 		title: 'General',
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index ead4241754de5a..4b38ef8ad752f9 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -17,6 +17,11 @@
 .components-navigation__menu-items {
 	display: flex;
 	flex-direction: column;
+
+	&.is-secondary {
+		// For now
+		margin-top: 24px;
+	}
 }
 
 .components-navigation__menu-item {

From 0a3d71742fe75e8281387d3429b0d04b49aa1d5f Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Thu, 23 Jul 2020 13:57:57 +1200
Subject: [PATCH 10/13] get even more working

---
 packages/components/src/navigation/index.js    |  2 +-
 .../components/src/navigation/stories/index.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index 029f9138ffe286..c3504ca7db6608 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -45,7 +45,7 @@ const Navigation = ( { data, initial } ) => {
 			</div>
 			<div className="components-navigation__menu-items">
 				{ items.map( ( item ) =>
-					item.menu === 'primary' ? (
+					item.menu !== 'secondary' ? (
 						<Item
 							key={ item.slug }
 							data={ data }
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index ede16f3046136f..ea763b0cd34487 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -35,6 +35,24 @@ const data = [
 		slug: 'products',
 		parent: 'analytics',
 	},
+	{
+		title: 'More',
+		slug: 'more',
+		parent: 'root',
+		back: 'WooCommerce Home',
+		menu: 'primary',
+	},
+	{
+		title: 'Even More',
+		slug: 'even_more',
+		back: 'More',
+		parent: 'more',
+	},
+	{
+		title: 'Lastly',
+		slug: 'lastly',
+		parent: 'even_more',
+	},
 	{
 		title: 'All orders',
 		slug: 'all_orders',

From 56be0287b6c80a96cc868d82387dbfd35abb8003 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 24 Jul 2020 10:51:15 +1200
Subject: [PATCH 11/13] remove extra styles

---
 packages/components/src/navigation/index.js    |  2 +-
 .../components/src/navigation/stories/index.js | 18 ------------------
 packages/components/src/navigation/style.scss  |  6 ------
 3 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
index c3504ca7db6608..bf5199edc2cb9e 100644
--- a/packages/components/src/navigation/index.js
+++ b/packages/components/src/navigation/index.js
@@ -33,7 +33,7 @@ const Navigation = ( { data, initial } ) => {
 	return (
 		<div className="components-navigation">
 			<Button
-				isPrimary
+				isSecondary
 				className="components-navigation__back"
 				onClick={ goBack }
 			>
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
index ea763b0cd34487..ede16f3046136f 100644
--- a/packages/components/src/navigation/stories/index.js
+++ b/packages/components/src/navigation/stories/index.js
@@ -35,24 +35,6 @@ const data = [
 		slug: 'products',
 		parent: 'analytics',
 	},
-	{
-		title: 'More',
-		slug: 'more',
-		parent: 'root',
-		back: 'WooCommerce Home',
-		menu: 'primary',
-	},
-	{
-		title: 'Even More',
-		slug: 'even_more',
-		back: 'More',
-		parent: 'more',
-	},
-	{
-		title: 'Lastly',
-		slug: 'lastly',
-		parent: 'even_more',
-	},
 	{
 		title: 'All orders',
 		slug: 'all_orders',
diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss
index 4b38ef8ad752f9..1c90f0573f0439 100644
--- a/packages/components/src/navigation/style.scss
+++ b/packages/components/src/navigation/style.scss
@@ -1,8 +1,6 @@
 .components-navigation {
 	width: 272px;
 	padding: 35px 30px;
-	background: #191e23;
-	color: #ccd0d4;
 }
 
 .components-navigation__back {
@@ -10,7 +8,6 @@
 }
 
 .components-navigation__title {
-	// For now
 	margin-bottom: 40px;
 }
 
@@ -19,7 +16,6 @@
 	flex-direction: column;
 
 	&.is-secondary {
-		// For now
 		margin-top: 24px;
 	}
 }
@@ -27,8 +23,6 @@
 .components-navigation__menu-item {
 	display: flex;
 	justify-content: space-between;
-	margin-left: -12px;
-	color: #8f98a1;
 
 	&.is-active span {
 		border-bottom: 2px solid var(--wp-admin-theme-color);

From 645018d81bd3f1da1019de80d6977314ae01f524 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 24 Jul 2020 11:04:45 +1200
Subject: [PATCH 12/13] add README

---
 packages/components/src/navigation/README.md | 43 ++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/components/src/navigation/README.md

diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
new file mode 100644
index 00000000000000..87bab075e53e8b
--- /dev/null
+++ b/packages/components/src/navigation/README.md
@@ -0,0 +1,43 @@
+# Navigation
+
+Navigation is a component which renders a component which renders a heirarchy of menu items.
+
+## Usage
+
+```jsx
+import { MenuItem } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+
+const data = [
+    { title: 'My Navigation', slug: 'root', back: 'Back' },
+    { title: 'Home', slug: 'home', parent: 'root', menu: 'primary' },
+    { title: 'Option one', slug: 'option_one', parent: 'root', menu: 'primary' },
+    { title: 'Option two', slug: 'option_two', parent: 'root', menu: 'primary' },
+    { title: 'Option three', slug: 'option_three', parent: 'root', menu: 'secondary' },
+    { title: 'Child one', slug: 'child_one', parent: 'option_three', menu: 'primary' },
+    { title: 'Child two', slug: 'child_two', parent: 'option_three', menu: 'primary' },
+    { title: 'Child three', slug: 'child_three', parent: 'option_three', menu: 'primary' },
+];
+
+const MyNavigation = () => {
+    return <Navigation data={ data } initial="home" />;
+};
+```
+
+## Props
+
+Navigation supports the following props.
+
+### `data`
+
+- Type: `array`
+- Required: Yes
+
+An array of config objects for each menu item.
+
+### `initial`
+
+- Type: `string`
+- Required: Yes
+
+The active slug.
\ No newline at end of file

From c89e13a4e46907976f50109c5ea2922461b49513 Mon Sep 17 00:00:00 2001
From: Paul Sealock <psealock@gmail.com>
Date: Fri, 24 Jul 2020 11:30:18 +1200
Subject: [PATCH 13/13] manifest

---
 docs/manifest.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index 41fbf7da9dae29..0c8ae73274ed07 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1043,6 +1043,12 @@
 		"markdown_source": "../packages/components/src/navigable-container/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Navigation",
+		"slug": "navigation",
+		"markdown_source": "../packages/components/src/navigation/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Notice",
 		"slug": "notice",