The Navigator component allows rendering nested views/panels/menus
(via the Navigator.Screen component) and navigate between them
(via the Navigator.Button and Navigator.BackButton components).
import { Navigator } from '@wordpress/components';
LinksPermalink to this section
View on Storybook
View source on GitHubPropsPermalink to this section
| Name | Default | Description |
|---|---|---|
initialPath Required |
The initial active path. | |
children Required |
The children elements. | |
as Required |
The HTML element to render the component as. |
ExamplesPermalink to this section
DefaultPermalink to this section
const Default = () => <Navigator initialPath="/">(<>
<Navigator.Screen path="/">
<h2>This is the home screen.</h2>
<VStack alignment="left">
<Navigator.Button variant="primary" path="/child">
Go to child screen.
</Navigator.Button>
<Navigator.Button variant="primary" path="/product/1">
Go to dynamic path screen with id 1.
</Navigator.Button>
<Navigator.Button variant="primary" path="/product/2">
Go to dynamic path screen with id 2.
</Navigator.Button>
</VStack>
</Navigator.Screen>
<Navigator.Screen path="/child">
<h2>This is the child screen.</h2>
<HStack spacing={ 2 } alignment="left">
<Navigator.BackButton variant="secondary">
Go back
</Navigator.BackButton>
<Navigator.Button
variant="primary"
path="/child/grandchild"
>
Go to grand child screen.
</Navigator.Button>
</HStack>
</Navigator.Screen>
<Navigator.Screen path="/child/grandchild">
<h2>This is the grand child screen.</h2>
<Navigator.BackButton variant="secondary">
Go back
</Navigator.BackButton>
</Navigator.Screen>
<Navigator.Screen path="/product/:id">
<DynamicScreen />
</Navigator.Screen>
</>)</Navigator>;
With Nested Initial PathPermalink to this section
const WithNestedInitialPath = () => <Navigator initialPath="/child/grandchild" />;
Skip FocusPermalink to this section
const SkipFocus = () => <Navigator initialPath="/">(<>
<div
style={ {
height: 150,
outline: '1px solid black',
outlineOffset: '-1px',
marginBlockEnd: '1rem',
display: 'contents',
} }
>
<Navigator.Screen path="/">
<h2>Home screen</h2>
<Navigator.Button variant="primary" path="/child">
Go to child screen.
</Navigator.Button>
</Navigator.Screen>
<Navigator.Screen path="/child">
<h2>Child screen</h2>
<Navigator.BackButton variant="secondary">
Go back to home screen
</Navigator.BackButton>
</Navigator.Screen>
</div>
<NavigatorButtonWithSkipFocus path="/child">
Go to child screen, but keep focus on this button
</NavigatorButtonWithSkipFocus>
</>)</Navigator>;