---
title: Navigation API
description: The Navigation API enables POS UI extension to navigate between screens.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/navigation-api'
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/navigation-api.md
---

# Navigation APIAPIs

Requires pos.home.modal.render

The Navigation API enables POS UI extension to navigate between screens.

## NavigationApi

* navigate

  (screenName: string, params?: any) => void

  required

  Navigate to a route in current navigation tree. Pushes the specified screen if it isn't present in the navigation tree, goes back to a created screen otherwise.

* pop

  () => void

  required

  Pops the currently shown screen

* dismiss

  () => void

  required

  Dismisses the modal highest on the stack

## Examples

Examples of using the Navigation API

### Examples

* #### Navigate between two screens

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    useApi,
    Navigator,
    Screen,
    Button,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridModal = () => {
    const api = useApi<'pos.home.modal.render'>();

    return (
      <Navigator>
        <Screen name="ScreenOne" title="Screen One Title">
          <Button
            title="Navigate to Screen Two"
            onPress={() => api.navigation.navigate('ScreenTwo')}
          />
        </Screen>
        <Screen name="ScreenTwo" title="Screen Two Title">
          <Button
            title="Navigate to Screen One"
            onPress={() => api.navigation.navigate('ScreenOne')}
          />
        </Screen>
      </Navigator>
    );
  };

  export default reactExtension('pos.home.modal.render', () => (
    <SmartGridModal />
  ));
  ```

  ##### TS

  ```ts
  import {
    extension,
    Button,
    Navigator,
    Screen,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.home.modal.render', (root, api) => {
    let navigator = root.createComponent(Navigator);

    let screenOne = root.createComponent(Screen, {
      name: 'ScreenOne',
      title: 'Screen One Title',
    });

    let screenTwo = root.createComponent(Screen, {
      name: 'ScreenTwo',
      title: 'Screen Two Title',
    });

    let navigateScreenOneBtn = root.createComponent(Button, {
      title: 'Navigate to Screen One',
      onPress: () => api.navigation.navigate('ScreenOne'),
    });

    let navigateScreenTwoBtn = root.createComponent(Button, {
      title: 'Navigate to Screen Two',
      onPress: () => api.navigation.navigate('ScreenTwo'),
    });

    screenOne.appendChild(navigateScreenTwoBtn);
    screenTwo.appendChild(navigateScreenOneBtn);
    navigator.appendChild(screenOne);
    navigator.appendChild(screenTwo);
    root.appendChild(navigator);
  });
  ```

### Navigation actions

### Examples

* #### Navigate to a route in current navigation tree

  ##### Description

  Navigates to the specified screen. It is important to note that any screens you wish to navigate to must already exist in the Navigator.

  ##### React

  ```tsx
  // You can navigate to any of these three screens since they all exist within the same Navigator.
  return (
    <Navigator>
      <Screen name="ScreenOne" title="Screen One Title" />
      <Screen name="ScreenTwo" title="Screen Two  Title" />
      <Screen name="ScreenThree" title="Screen Three Title" />
    </Navigator>
  );
  ```

  ##### TS

  ```ts
  // You can navigate to any of these three screens since they all exist within the same Navigator.
  let navigator = root.createComponent(Navigator);

  let screenOne = root.createComponent(Screen, {
    name: 'ScreenOne',
    title: 'Screen One Title',
  });

  let screenTwo = root.createComponent(Screen, {
    name: 'ScreenTwo',
    title: 'Screen Two Title',
  });

  let screenThree = root.createComponent(Screen, {
    name: 'ScreenThree',
    title: 'Screen Three Title',
  });

  navigator.appendChild(screenOne);
  navigator.appendChild(screenTwo);
  navigator.appendChild(screenThree);
  root.appendChild(navigator);
  ```