How to create a Tab

Tabs have two functions. They are a navigational tool and a way to link content into your app. This article will show you how to create and customize tabs in your app project.

Where are the tabs?

  1. Click on Projects and select your app  project
  2. Next, click on Tabs

CleanShot_2021-09-15_at_14.58.35_2x.png

Creating a tab

To create a tab:

1. Click on + New Tab

CleanShot_2021-09-15_at_15.28.16_2x.png

2. Choose the type of content you want to link to the tab. It can be a screen, a tour, or a list. You can also create a Menu but we'll get to those later on.

CleanShot_2021-09-15_at_15.28.32_2x.png

3. Once you have chosen the type of content you want to link then select the specific piece of content. Click on the + symbol to link the content and create the tab. In the example pictured below, the Explore Auckland tour is being selected.

CleanShot_2021-09-15_at_15.29.06_2x.png

Customizing Tabs

Tabs can be re-ordered and the display icon can be changed.

Ordering tabs

Tabs will be initially displayed in the order they are created.  The first tab is always the home screen of the app. 

The order of the tabs can be changed. Click and hold the button with three horizontal lines (pictured below) to the right of the tab name. Drag and drop the tab up or down the list of tabs to reorder it. Once you have the tab order set don't forget to click save at the bottom right of the screen.

CleanShot_2021-09-15_at_15.11.13_2x.png

Change the tab icon

To change the tab icon click on the icon to the left of the tab.  This will open a pop-up window where you can select one of the hundreds of icon option

CleanShot_2021-09-15_at_15.01.57_2x.png  CleanShot_2021-09-15_at_15.03.12_2x.png

Notes

  • The first tab is always the home screen
  • There is space for around 5 tabs on most mobile screen devices
  • The Settings tab is always present. It cannot be removed or reordered
  • If you are using the QR Code Scanner or  Keypad functionality in your app then a tab for it will be automatically added

IMG_B960F7FFA4FC-1.jpeg

Was this article helpful?
0 out of 0 found this helpful