diff --git a/docs/manifest.json b/docs/manifest.json
index 4264870ae044a..7886fe11ea062 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1067,6 +1067,12 @@
 		"markdown_source": "../packages/components/src/navigation/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Navigator",
+		"slug": "navigator",
+		"markdown_source": "../packages/components/src/navigator/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Notice",
 		"slug": "notice",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index da076b23a46d4..df9fef03d219b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,10 @@
 -   Removed the deprecated `onClickOutside` prop from the `Popover` component ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
 -   Changed `RangeControl` component to not apply `shiftStep` to inputs from its `<input type="range"/>` ([35020](https://github.com/WordPress/gutenberg/pull/35020)).
 
+### New Feature
+
+-   Add an experimental `Navigator` components ([#34904](https://github.com/WordPress/gutenberg/pull/34904)) as a replacement for the previous `Navigation` related components.
+
 ### Bug Fix
 
 -   Fixed rounding of value in `RangeControl` component when it loses focus while the `SHIFT` key is held. ([#35020](https://github.com/WordPress/gutenberg/pull/35020)).
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index b605bd852db99..4e3560104e3b3 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -96,6 +96,11 @@ export { default as __experimentalNavigationBackButton } from './navigation/back
 export { default as __experimentalNavigationGroup } from './navigation/group';
 export { default as __experimentalNavigationItem } from './navigation/item';
 export { default as __experimentalNavigationMenu } from './navigation/menu';
+export {
+	Navigator as __experimentalNavigator,
+	NavigatorScreen as __experimentalNavigatorScreen,
+	useNavigator as __experimentalUseNavigator,
+} from './navigator';
 export { default as Notice } from './notice';
 export { default as __experimentalNumberControl } from './number-control';
 export { default as NoticeList } from './notice/list';
@@ -157,6 +162,7 @@ export {
 	useCustomUnits as __experimentalUseCustomUnits,
 	parseUnit as __experimentalParseUnit,
 } from './unit-control';
+export { View as __experimentalView } from './view';
 export { VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';
diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
new file mode 100644
index 0000000000000..99eb5e78413f4
--- /dev/null
+++ b/packages/components/src/navigator/README.md
@@ -0,0 +1,88 @@
+# Navigator
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+The Navigator components allows rendering nested panels or menus (also called screens) and navigate between these different states. The Global Styles sidebar is an example of this.
+
+The components is not opinionated in terms of UI, it lets compose any UI components to navigate between the nested screens.
+
+## Usage
+
+```jsx
+import {
+	__experimentalNavigator as Navigator,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
+} from '@wordpress/components';
+
+function NavigatorButton( {
+	path,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Button
+			onClick={ () => navigator.push( path, { isBack } ) }
+			{ ...props }
+		/>
+	);
+}
+
+const MyNavigation = () => (
+	<Navigator initialPath="/">
+		<NavigatorScreen path="/">
+			<p>This is the home screen.</p>
+			<NavigatorButton isPrimary path="/child">
+				Navigate to child screen.
+			</NavigatorButton>
+		</NavigatorScreen>
+
+		<NavigatorScreen path="/child">
+			<p>This is the child screen.</p>
+			<NavigatorButton isPrimary path="/" isBack>
+				Go back
+			</NavigatorButton>
+		</NavigatorScreen>
+	</Navigator>
+);
+```
+
+## Navigator Props
+
+`Navigator` supports the following props.
+
+### `initialPath`
+
+-   Type: `string`
+-   Required: No
+
+The initial active path.
+
+## NavigatorScreen Props
+
+`NavigatorScreen` supports the following props.
+
+### `path`
+
+-   Type: `string`
+-   Required: Yes
+
+The path of the current screen.
+
+## The navigator object.
+
+You can retrieve a `navigator` instance by using the `useNavigator` hook.
+The navigator offers the following methods:
+
+### `push`
+
+-   Type: `( path: string, options ) => void`
+
+The `push` function allows you to navigate to a given path. The second argument can augment the navigation operations with different options.
+
+The available options are:
+
+ - `isBack` (`boolean): A boolean flag indicating that we're moving back to a previous state.
diff --git a/packages/components/src/navigator/context.js b/packages/components/src/navigator/context.js
new file mode 100644
index 0000000000000..2113ae4908286
--- /dev/null
+++ b/packages/components/src/navigator/context.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const NavigatorContext = createContext();
diff --git a/packages/components/src/navigator/index.js b/packages/components/src/navigator/index.js
new file mode 100644
index 0000000000000..c00a6a1204336
--- /dev/null
+++ b/packages/components/src/navigator/index.js
@@ -0,0 +1,3 @@
+export { default as Navigator } from './navigator';
+export { default as NavigatorScreen } from './screen';
+export { default as useNavigator } from './use-navigator';
diff --git a/packages/components/src/navigator/navigator.js b/packages/components/src/navigator/navigator.js
new file mode 100644
index 0000000000000..2073374771921
--- /dev/null
+++ b/packages/components/src/navigator/navigator.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { NavigatorContext } from './context';
+
+function Navigator( { initialPath, children } ) {
+	const [ path, setPath ] = useState( { path: initialPath } );
+
+	return (
+		<NavigatorContext.Provider value={ [ path, setPath ] }>
+			{ children }
+		</NavigatorContext.Provider>
+	);
+}
+
+export default Navigator;
diff --git a/packages/components/src/navigator/screen.js b/packages/components/src/navigator/screen.js
new file mode 100644
index 0000000000000..1d27e413a093f
--- /dev/null
+++ b/packages/components/src/navigator/screen.js
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { motion } from 'framer-motion';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { useReducedMotion, useFocusOnMount } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { NavigatorContext } from './context';
+
+const animationEnterDelay = 0;
+const animationEnterDuration = 0.14;
+const animationExitDuration = 0.14;
+const animationExitDelay = 0;
+
+function NavigatorScreen( { children, path } ) {
+	const prefersReducedMotion = useReducedMotion();
+	const [ currentPath ] = useContext( NavigatorContext );
+	const isMatch = currentPath.path === path;
+	const ref = useFocusOnMount();
+
+	// This flag is used to only apply the focus on mount when the actual path changes.
+	// It avoids the focus to happen on the first render.
+	const [ hasPathChanged, setHasPathChanged ] = useState( false );
+	useEffect( () => {
+		setHasPathChanged( true );
+	}, [ path ] );
+
+	if ( ! isMatch ) {
+		return null;
+	}
+
+	if ( prefersReducedMotion ) {
+		return <div>{ children }</div>;
+	}
+
+	const animate = {
+		opacity: 1,
+		transition: {
+			delay: animationEnterDelay,
+			duration: animationEnterDuration,
+			ease: 'easeInOut',
+		},
+		x: 0,
+	};
+	const initial = {
+		opacity: 0,
+		x:
+			( isRTL() && currentPath.isBack ) ||
+			( ! isRTL() && ! currentPath.isBack )
+				? 50
+				: -50,
+	};
+	const exit = {
+		delay: animationExitDelay,
+		opacity: 0,
+		x:
+			( ! isRTL() && currentPath.isBack ) ||
+			( isRTL() && ! currentPath.isBack )
+				? 50
+				: -50,
+		transition: {
+			duration: animationExitDuration,
+			ease: 'easeInOut',
+		},
+	};
+
+	const animatedProps = {
+		animate,
+		exit,
+		initial,
+	};
+
+	return (
+		<motion.div
+			ref={ hasPathChanged ? ref : undefined }
+			{ ...animatedProps }
+		>
+			{ children }
+		</motion.div>
+	);
+}
+
+export default NavigatorScreen;
diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
new file mode 100644
index 0000000000000..7a1352c30ffe3
--- /dev/null
+++ b/packages/components/src/navigator/stories/index.js
@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { Navigator, NavigatorScreen, useNavigator } from '../';
+
+export default {
+	title: 'Components (Experimental)/Navigator',
+	component: Navigator,
+};
+
+function NavigatorButton( { path, isBack = false, ...props } ) {
+	const navigator = useNavigator();
+	return (
+		<Button
+			onClick={ () => navigator.push( path, { isBack } ) }
+			{ ...props }
+		/>
+	);
+}
+
+const MyNavigation = () => (
+	<Navigator initialPath="/">
+		<NavigatorScreen path="/">
+			<p>This is the home screen.</p>
+			<NavigatorButton isPrimary path="/child">
+				Navigate to child screen.
+			</NavigatorButton>
+		</NavigatorScreen>
+
+		<NavigatorScreen path="/child">
+			<p>This is the child screen.</p>
+			<NavigatorButton isPrimary path="/" isBack>
+				Go back
+			</NavigatorButton>
+		</NavigatorScreen>
+	</Navigator>
+);
+
+export const _default = () => {
+	return <MyNavigation />;
+};
diff --git a/packages/components/src/navigator/use-navigator.js b/packages/components/src/navigator/use-navigator.js
new file mode 100644
index 0000000000000..232fdaafd7d06
--- /dev/null
+++ b/packages/components/src/navigator/use-navigator.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { NavigatorContext } from './context';
+
+function useNavigator() {
+	const [ , setPath ] = useContext( NavigatorContext );
+
+	return {
+		push( path, options ) {
+			setPath( { path, ...options } );
+		},
+	};
+}
+
+export default useNavigator;
diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
index e0b1d28c42787..2d740ec9a8f3e 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -8,14 +8,29 @@ import { map } from 'lodash';
  */
 import {
 	Button,
-	__experimentalNavigation as Navigation,
-	__experimentalNavigationItem as NavigationItem,
-	__experimentalNavigationMenu as NavigationMenu,
-	__experimentalNavigationGroup as NavigationGroup,
+	__experimentalNavigator as Navigator,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
-import { layout, brush, styles, typography } from '@wordpress/icons';
+import {
+	Icon,
+	layout,
+	brush,
+	styles,
+	typography,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -49,110 +64,165 @@ function getPanelTitle( blockName ) {
 	return blockType.title;
 }
 
-function GlobalStylesLevel( {
+const ScreenHeader = ( { back, title } ) => {
+	return (
+		<VStack spacing={ 5 }>
+			<HStack spacing={ 2 }>
+				<View>
+					<NavigationButton
+						path={ back }
+						icon={
+							<Icon
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								variant="muted"
+							/>
+						}
+						size="small"
+						isBack
+					/>
+				</View>
+				<Spacer>
+					<Heading level={ 5 }>{ title }</Heading>
+				</Spacer>
+			</HStack>
+		</VStack>
+	);
+};
+
+function GlobalStylesLevelMenu( { context, parentMenu = '' } ) {
+	const hasTypographyPanel = useHasTypographyPanel( context );
+	const hasColorPanel = useHasColorPanel( context );
+	const hasBorderPanel = useHasBorderPanel( context );
+	const hasDimensionsPanel = useHasDimensionsPanel( context );
+	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+
+	return (
+		<ItemGroup>
+			{ hasTypographyPanel && (
+				<NavigationButton
+					icon={ typography }
+					path={ parentMenu + '/typography' }
+				>
+					{ __( 'Typography' ) }
+				</NavigationButton>
+			) }
+			{ hasColorPanel && (
+				<NavigationButton
+					icon={ brush }
+					path={ parentMenu + '/colors' }
+				>
+					{ __( 'Colors' ) }
+				</NavigationButton>
+			) }
+			{ hasLayoutPanel && (
+				<NavigationButton
+					icon={ layout }
+					path={ parentMenu + '/layout' }
+				>
+					{ __( 'Layout' ) }
+				</NavigationButton>
+			) }
+		</ItemGroup>
+	);
+}
+
+function GlobalStylesLevelScreens( {
 	context,
 	getStyle,
 	setStyle,
 	getSetting,
 	setSetting,
-	parentMenu = 'root',
+	parentMenu = '',
 } ) {
 	const hasTypographyPanel = useHasTypographyPanel( context );
 	const hasColorPanel = useHasColorPanel( context );
 	const hasBorderPanel = useHasBorderPanel( context );
 	const hasDimensionsPanel = useHasDimensionsPanel( context );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-
 	return (
 		<>
-			<NavigationGroup>
-				{ hasTypographyPanel && (
-					<NavigationItem
-						item="item-typography"
-						navigateToMenu={ parentMenu + '.typography' }
-						icon={ typography }
+			{ hasTypographyPanel && (
+				<NavigatorScreen path={ parentMenu + '/typography' }>
+					<ScreenHeader
+						back={ parentMenu ? parentMenu : '/' }
 						title={ __( 'Typography' ) }
 					/>
-				) }
-				{ hasColorPanel && (
-					<NavigationItem
-						item="item-color"
-						navigateToMenu={ parentMenu + '.color' }
+					<TypographyPanel
+						context={ context }
+						getStyle={ getStyle }
+						setStyle={ setStyle }
+					/>
+				</NavigatorScreen>
+			) }
+
+			{ hasColorPanel && (
+				<NavigatorScreen path={ parentMenu + '/colors' }>
+					<ScreenHeader
+						back={ parentMenu ? parentMenu : '/' }
 						title={ __( 'Colors' ) }
-						icon={ brush }
 					/>
-				) }
-				{ hasLayoutPanel && (
-					<NavigationItem
-						item="item-layout"
-						navigateToMenu={ parentMenu + '.layout' }
-						title={ __( 'Layout' ) }
-						icon={ layout }
+					<ColorPanel
+						context={ context }
+						getStyle={ getStyle }
+						setStyle={ setStyle }
+						getSetting={ getSetting }
+						setSetting={ setSetting }
 					/>
-				) }
-			</NavigationGroup>
+				</NavigatorScreen>
+			) }
 
-			{ hasTypographyPanel && (
-				<NavigationMenu
-					menu={ parentMenu + '.typography' }
-					parentMenu={ parentMenu }
-					title={ __( 'Typography' ) }
-				>
-					<NavigationItem>
-						<TypographyPanel
+			{ hasLayoutPanel && (
+				<NavigatorScreen path={ parentMenu + '/layout' }>
+					<ScreenHeader
+						back={ parentMenu ? parentMenu : '/' }
+						title={ __( 'Layout' ) }
+					/>
+					{ hasDimensionsPanel && (
+						<DimensionsPanel
 							context={ context }
 							getStyle={ getStyle }
 							setStyle={ setStyle }
 						/>
-					</NavigationItem>
-				</NavigationMenu>
-			) }
-
-			{ hasColorPanel && (
-				<NavigationMenu
-					menu={ parentMenu + '.color' }
-					parentMenu={ parentMenu }
-					title={ __( 'Colors' ) }
-				>
-					<NavigationItem>
-						<ColorPanel
+					) }
+					{ hasBorderPanel && (
+						<BorderPanel
 							context={ context }
 							getStyle={ getStyle }
 							setStyle={ setStyle }
-							getSetting={ getSetting }
-							setSetting={ setSetting }
 						/>
-					</NavigationItem>
-				</NavigationMenu>
-			) }
-
-			{ hasLayoutPanel && (
-				<NavigationMenu
-					menu={ parentMenu + '.layout' }
-					parentMenu={ parentMenu }
-				>
-					<NavigationItem>
-						{ hasDimensionsPanel && (
-							<DimensionsPanel
-								context={ context }
-								getStyle={ getStyle }
-								setStyle={ setStyle }
-							/>
-						) }
-						{ hasBorderPanel && (
-							<BorderPanel
-								context={ context }
-								getStyle={ getStyle }
-								setStyle={ setStyle }
-							/>
-						) }
-					</NavigationItem>
-				</NavigationMenu>
+					) }
+				</NavigatorScreen>
 			) }
 		</>
 	);
 }
 
+function NavigationButton( {
+	path,
+	icon,
+	children,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Item
+			isAction
+			onClick={ () => navigator.push( path, { isBack } ) }
+			{ ...props }
+		>
+			<HStack justify="flex-start">
+				{ icon && (
+					<FlexItem>
+						<Icon icon={ icon } size={ 24 } />
+					</FlexItem>
+				) }
+				<FlexItem>{ children }</FlexItem>
+			</HStack>
+		</Item>
+	);
+}
+
 export default function GlobalStylesSidebar() {
 	const {
 		root,
@@ -187,68 +257,74 @@ export default function GlobalStylesSidebar() {
 				</>
 			}
 		>
-			<Navigation>
-				<NavigationMenu>
-					<NavigationGroup>
-						<NavigationItem>
-							<StylePreview />
-						</NavigationItem>
-					</NavigationGroup>
-					<GlobalStylesLevel
-						context={ root }
-						getStyle={ getStyle }
-						setStyle={ setStyle }
-						getSetting={ getSetting }
-						setSetting={ setSetting }
-					/>
-					<NavigationGroup className="edit-site-global-styles-sidebar__blocks-group">
-						<NavigationItem
-							className="edit-site-global-styles-sidebar__blocks-group-help"
-							isText
-						>
-							{ __(
-								'Customize the appearance of specific blocks for the whole site'
-							) }
-						</NavigationItem>
-						<NavigationItem
-							item="item-blocks"
-							navigateToMenu="blocks"
-							title={ __( 'Blocks' ) }
-						/>
-					</NavigationGroup>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="blocks"
-					parentMenu="root"
-					title={ __( 'Blocks' ) }
-				>
+			<Navigator initialPath="/">
+				<NavigatorScreen path="/">
+					<StylePreview />
+
+					<GlobalStylesLevelMenu context={ root } />
+
+					<ItemGroup>
+						<Item>
+							<p>
+								{ __(
+									'Customize the appearance of specific blocks for the whole site'
+								) }
+							</p>
+						</Item>
+						<NavigationButton path="/blocks">
+							{ __( 'Blocks' ) }
+						</NavigationButton>
+					</ItemGroup>
+				</NavigatorScreen>
+
+				<NavigatorScreen path="/blocks">
+					<ScreenHeader back="/" title={ __( 'Blocks' ) } />
 					{ map( blocks, ( _, name ) => (
-						<NavigationItem
+						<NavigationButton
+							path={ '/blocks/' + name }
 							key={ 'menu-itemblock-' + name }
-							item={ 'block-' + name }
-							navigateToMenu={ 'block-' + name }
-							title={ getPanelTitle( name ) }
-						/>
+						>
+							{ getPanelTitle( name ) }
+						</NavigationButton>
 					) ) }
-				</NavigationMenu>
+				</NavigatorScreen>
+
 				{ map( blocks, ( block, name ) => (
-					<NavigationMenu
+					<NavigatorScreen
 						key={ 'menu-block-' + name }
-						menu={ 'block-' + name }
-						parentMenu="blocks"
-						title={ getPanelTitle( name ) }
+						path={ '/blocks/' + name }
 					>
-						<GlobalStylesLevel
-							parentMenu={ 'block-' + name }
+						<ScreenHeader
+							back="/blocks"
+							title={ getPanelTitle( name ) }
+						/>
+						<GlobalStylesLevelMenu
+							parentMenu={ '/blocks/' + name }
 							context={ block }
-							getStyle={ getStyle }
-							setStyle={ setStyle }
-							getSetting={ getSetting }
-							setSetting={ setSetting }
 						/>
-					</NavigationMenu>
+					</NavigatorScreen>
+				) ) }
+
+				<GlobalStylesLevelScreens
+					context={ root }
+					getStyle={ getStyle }
+					setStyle={ setStyle }
+					getSetting={ getSetting }
+					setSetting={ setSetting }
+				/>
+
+				{ map( blocks, ( block, name ) => (
+					<GlobalStylesLevelScreens
+						key={ 'screens-block-' + name }
+						parentMenu={ '/blocks/' + name }
+						context={ block }
+						getStyle={ getStyle }
+						setStyle={ setStyle }
+						getSetting={ getSetting }
+						setSetting={ setSetting }
+					/>
 				) ) }
-			</Navigation>
+			</Navigator>
 		</DefaultSidebar>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/global-styles/style.scss b/packages/edit-site/src/components/sidebar/global-styles/style.scss
index 681a968a02e82..9dd563efad2bf 100644
--- a/packages/edit-site/src/components/sidebar/global-styles/style.scss
+++ b/packages/edit-site/src/components/sidebar/global-styles/style.scss
@@ -3,6 +3,7 @@
 	align-items: center;
 	justify-content: center;
 	min-height: 152px;
+	margin: $grid-unit-20;
 
 	.component-color-indicator {
 		border-radius: 50%;