---
name: Navigator
package: '@wordpress/components'
category: Navigation
status: stable
canonical: 'https://system.automattic.design/components/navigator/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-navigator--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/navigator'
---

# Navigator

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).

```tsx
import { Navigator } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `initialPath` *(required)* | `string` | — | The initial active path. |
| `children` *(required)* | `ReactNode` | — | The children elements. |
| `as` *(required)* | `"symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "center" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "search" \| "slot" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "template" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "set" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view"` | — | The HTML element to render the component as. |


## Examples

### Default

```tsx
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 Path

```tsx
const WithNestedInitialPath = () => <Navigator initialPath="/child/grandchild" />;
```

### Skip Focus

```tsx
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>;
```