Screen-to-Screen Navigation

Even the simplest apps usually have some kind of navigation - maybe the user needs to show a detail of a product, maybe the app starts with onboarding and the actual content is hidden behind it, or maybe you are building a really complex app with complicated routing.

Supernova allows you to create complex navigation chains with ease. Compared to other tools, Supernova doesn't work with hotspots - hotspots are not a concept that is applicable to apps and design tools only support it because they don't have real components (instead, they use visual layer, not components with specific behavior).

Instead, Supernova invokes navigation from real components that allow for it. For example, an image view would be a container that doesn't support this behavior - it is used purely for presentation purposes. However, by using a button, you can invoke all kinds of stuff, not just navigation. This is because button provides a "click" action that you can connect to the desired behavior.

Invokable Components

As we've already stated, only some components support the navigation:

  • Buttons - Your primary way how to do screen-to-screen navigation. Buttons by default also create touch animation so there is visual feedback for the user that something is about to happen
  • Table Items - When you create a table with cells, you can use cells to link to other screens. This is very useful for apps that present a list of information with details on another screen (for example, a list of shoes with detailed information like color and size in different screen). Keep in mind that when you create a navigation connection from the cell, all instances of the cell will be automatically linking to that screen (all shoes will show their detail when selected)
  • Grid Items - Similarly to table items, grid items can also invoke a navigation connection
  • Navigation Items - Navigation bars are a special type of components which can contain left and right navigation items. Those items can be used to invoke navigation as well (usually, you'll find it useful for things like showing the user settings, logging-out and so on)

You are probably wondering why tabs are not listed. Tabbed navigation is supported but done differently - read about it here.

Creating Navigation

Now that you know what all components can be used to create navigation, let's see how you can actually do it.

Locating the origin point

First, make sure that the screen that user navigates from has any of the applicable components (buttons, navigation items and so on). Then, go to the navigation map and right-click the screen where the navigation originates from.

Right-click or shift-click the screen you want to connect, 
and select the component from which you want the connection to originateRight-click or shift-click the screen you want to connect, 
and select the component from which you want the connection to originate

Right-click or shift-click the screen you want to connect,
and select the component from which you want the connection to originate

See the navigation types section to understand the difference between push and modal navigation.

Connecting the destination point

Once the menu is brought up, select which component you'd like to use for the navigation. You can see that only items that support navigation are shown - pick one of those, the menu will close and an arrow following your cursor will appear. Connect the arrow to screen that you want to show on click and you are done!

Screens are now connected to each other. 
You can go to live mode and test it immediately!Screens are now connected to each other. 
You can go to live mode and test it immediately!

Screens are now connected to each other.
You can go to live mode and test it immediately!

Navigation Types

There are 2 types of screen-to-screen navigation: Push and Modal.

Push Navigation

Push navigation adds a new screen to the current navigation stack. You can think of it as a stack of sheets of paper - you put new ones on top of the stack, and when you want to remove them, you also take them from the top. Similarly, you add new screens on top of the old ones, and when the user taps back, you remove the topmost one.

The most important thing to note is that push navigation preserves the content of each screen in the stack - when you go back, it will look exactly as you left it. How the transition looks depends on the targeted platform, for example, it will slide from right to left when targeting iOS.

Use push transitions when you present details of the current context (for example, detail of the shoe from the list).

iOS-style push transitioniOS-style push transition

iOS-style push transition

Modal Navigation

Modal navigation creates a new navigation stack - instead of putting sheets on top, you create a new pile. This is used when you are presenting something that doesn't connect to the current context. For example, showing user settings from the navigation item when the current context is a list of shoes is a prime candidate to use modal navigation.

iOS-style modal transitioniOS-style modal transition

iOS-style modal transition

Navigating Back

Creating back navigation is fully automated for you. Select the component you'd like to use to navigate back, locate the interaction panel on the left and switch to navigate back option. Supernova will handle all the connections and intricacies for you, even in the exported code. Note that only buttons or navigation items can navigate back, table and grid cells can't be used for that purpose.

Navigating back is as single as enabling that options in the interaction panelNavigating back is as single as enabling that options in the interaction panel

Navigating back is as single as enabling that options in the interaction panel

❗️

DO NOT!

Don't create navigation back by creating another "push" or "modal" transition. While it will show a new screen, it doesn't serve the same purpose - you'd be just piling new screens on top of each other, usually running out of memory sometime later.

Use the proper navigate back option instead - that will remove the old content properly and will also give you a proper closing animation (back animations are played in reverse so the user have a visual confirmation about navigating back).