Navigation Components

Navigation components are a special type of component that can't be created by hand - instead, they are always converted from design components prepared beforehand and become part of the screen structure.

There can always be at most one navigation bar component and at most one tab bar component on any screen. It is, of course, possible to have screens without navigation components as well.

Navigation bars and tab bars are shared components - if you change the design style for one screen, it propagates to all connected screens.

📘

Pro Tip

You don't have to use navigation components in order to actually use navigation. Even though they are required in the app internally, Supernova is smart enough to integrate them into the exported environment and set the screen state to not show them visually, effectively achieving the best of both worlds.

Navigation Bars

Navigation bars visually represent screen-to-screen navigation and are always located at the top part of the application. Navigation bars look different based on the platform, with the biggest differences being the alignments of the items. Navigation bars also look different when exported to different devices - for example, the iPhone X navigation bar is taller than the regular one. All of this behavior, including changes to export, is supported in Supernova out of the box.

You can read more about how to use navigation bars here.

Important properties:

  • Title Text - Title text shown in the middle of the navigation bar

  • Title Font - Font of the title text

  • Title Color - Color of the title text

  • Title Image - Title image that will replace the title text if used. Note that using both the title text and title image is not possible as this behavior is not supported by native components.

  • Item Font - Font of left and right text items

  • Item Tint Color - Color of left and right text and image items. If images are provided, they'll be automatically recolored to this color

  • Background Color - Color of the background of the navigation bar itself

  • Background Image - Background image of the navigation bar - image will be stretched to the full width of the navigation bar

Tab Bars

Tab bars visually represent tabbed navigation and are always located at the bottom part of the application. Tab bars also look different when exported to different devices - for example, the iPhone X tab bar is taller than the regular one. All of this behavior, including changes to export, is supported in Supernova out of the box.

You can read about how to use tab bars with tabbed navigation here.

Important properties:

  • Item Font - Font of unselected tab bar item text
  • Text Color - Color of unselected tab bar item text
  • Selected Text Color - Color of selected tab bar item text
  • Background Color - Color of the background of the tab bar itself
  • Image Color - Color of unselected items. If images are provided, they'll be automatically recolored to this color
  • Selected Image Color - Color of the selected item. If images are provided, they'll be automatically recolored to this color

What’s Next

Learn about how to properly work with designs and prepare them for Supernova