diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js
index d93ef079594..bfbe428eb8b 100644
--- a/plugins/woocommerce-admin/client/settings/index.js
+++ b/plugins/woocommerce-admin/client/settings/index.js
@@ -18,7 +18,11 @@ const Settings = ( { params } ) => {
 
 	return (
 		<>
-			<Tabs data={ settingsData } page={ params.page } />
+			<Tabs data={ settingsData } page={ params.page }>
+				<p>
+					now editing <span>{ params.page }</span>
+				</p>
+			</Tabs>
 		</>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/settings/tabs.js b/plugins/woocommerce-admin/client/settings/tabs.js
index 36708ab64be..b1dfead077d 100644
--- a/plugins/woocommerce-admin/client/settings/tabs.js
+++ b/plugins/woocommerce-admin/client/settings/tabs.js
@@ -2,10 +2,12 @@
  * External dependencies
  */
 import { TabPanel } from '@wordpress/components';
+import { getNewPath, navigateTo } from '@woocommerce/navigation';
 
-export const Tabs = ( { data, page } ) => {
+export const Tabs = ( { data, page, children } ) => {
 	const onSelect = ( tabName ) => {
-		console.log( 'Selecting tab', tabName );
+		const url = getNewPath( {}, `/settings/${ tabName }` );
+		navigateTo( { url } );
 	};
 
 	return (
@@ -20,7 +22,7 @@ export const Tabs = ( { data, page } ) => {
 					title: data[ key ].label,
 				} ) ) }
 			>
-				{ ( tab ) => <p>{ tab.title }</p> }
+				{ () => <div>{ children }</div> }
 			</TabPanel>
 		</>
 	);