Navigation
Use Superwall’s navigation component to navigate through pages of content.
Adding a navigation component
The navigation component was built to make paging, or navigating through paywall content, easy. To use the navigation component:
- In the left sidebar, click + to add a new element.
- Choose Navigation under the “Base Elements” header.
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:
From there, add in content to create pages using stacks:
Similar to the parent navigation element, it helps to have the width of your stacks be 100% of the parent.
Changing pages
When a navigation element is added, Superwall automatically creates an element variable for it (accessed through the Variables tab in the left sidebar, or the variables button in the floating toolbar). Its name will match whatever is in the element hierarchy in the left sidebar:
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 to the button, which increments the element variable’s current index value:
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
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:
Available transitions are:
- No Transition: No animation will occur during page changes.
- Push: Each page is pushed on or off of the next page, similar to navigation stacks in iOS.
- Fade: Each page change results in an opacity fade in or out.
- Slide: Similar to push, but the animation results in a smooth transition between pages, much like scrolling through a carousel would look.