# Navigation

Use Superwall's navigation component to navigate through pages of content.

> **Tip**

The navigation component is also the foundation for [Flows](/docs/dashboard/dashboard-creating-flows/getting-started). Adding a navigation element to a paywall unlocks multi-page experiences with branching, conditional routing, and more. If you're building something like onboarding or a cancellation survey, check out the [Flows docs](/docs/dashboard/dashboard-creating-flows/getting-started).



Adding a navigation component [#adding-a-navigation-component]

The navigation component was built to make paging, or navigating through paywall content, easy. To use the navigation component:

1. In the left sidebar, click **+** to add a new element.
2. Choose **Navigation** under the "Base Elements" header.

<img src="__img0" />

You'll see the navigation component in the element hierarchy. **In most cases, you'll want a navigation's width to be 100% of the viewport**:

<img src="__img1" />

From there, add in content to create pages using [stacks](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-stacks):

<img src="__img2" />

Similar to the parent navigation element, it helps to have the width of your stacks be 100% of the parent.

Changing pages [#changing-pages]

When a navigation element is added, Superwall automatically creates an element variable for it (accessed through the &#x2A;*[Variables](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-variables)*&#x2A; tab in the left sidebar, or the variables button in the &#x2A;*[floating toolbar](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-floating-toolbar)**). Its name will match whatever is in the element hierarchy in the left sidebar:

<img src="__img3" />

Each top-level child within the navigation component represents a *current index* value, starting from 0. Changing this value will change which page is displayed. In this example, we add a [tap behavior](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#tap-behaviors) to the button, which increments the element variable's `current index` value:

<img src="__img4" />

> **Note**

The variable's name is derived by the node's unique identifier. You don't need to set or generally be aware of this value.



Editing transitions [#editing-transitions]

A navigation component has four different transitions to use. Edit them by **clicking** on the navigation component from the left sidebar, and then selecting a value in the trailing sidebar:

<img src="__img5" />

Available transitions are:

1. **No Transition:** No animation will occur during page changes.
2. **Push:** Each page is pushed on or off of the next page, similar to navigation stacks in iOS.
3. **Fade:** Each page change results in an opacity fade in or out.
4. **Slide:** Similar to push, but the animation results in a smooth transition between pages, much like scrolling through a carousel would look.