Skip to content
PandaSuite Docs

Tab bar

≈ 800 tokens, Approximate size of this page for an AI assistant

A tab bar appears at the bottom of the application screen and allows you to quickly move from one section to another in the application. This is the most popular navigation structure for mobile applications. It usually contains between 4 and 5 tabs.

Tab bar at the bottom of a smartphone: four icons (glasses, house, Q&A, document), the first one highlighted in purple

You can add secondary navigation to this main navigation, for example tabs in a section (at the top of the screen).

Create tab bar

As with any navigation element, it is best to use the foreground to create the tab bar. This way the tab bar is persistent throughout the application and you can use the states to represent the selection of each icon.

Go to the foreground.

Insert graphic elements

Import the graphic elements of your tab bar: the background bar and the icons. For the background bar, you can use a Shape. If you want to color your icons on selection, choose a .svg format or import your icon files in two colors. In the example below, white icons sit on colored shapes: only the shape color changes from one foreground to the next.

In the 1st foreground, represent your tab bar for the 1st section: here it is the “Articles” section. Visually make it easy for the user to know that the first icon has been selected. In this example, the selected icon is colored. (NB: if you want to create a home screen without a tab bar, you need to create a blank foreground.)

Foreground 1 “Section: Articles” selected in the Foregrounds panel: the tab bar at the bottom of the screen, the Articles tab in purple

Above each icon, add an Interactive Area component, which allows you to expand the tap area. Link the Change screen action to the right screen.

“Articles” Interactive Area over the first tab, with its Single tap action Go to screen 1 Articles; one area per icon

Decline other states

Decline the other sections (“Procedure”, “Quiz”, “Form”) by creating new linked foregrounds: in the Foregrounds panel, open the + menu and choose Create a linked foreground. Each foreground is linked to the previous one to keep the links and transitions. On each one, change the icon color and visually represent the selected icon.

Four linked foregrounds, one per section, each linked to the previous; in Section: Procedure, the Procedure tab is purple

Associate each section with the right foreground

The last step is to associate each section with the right foreground! Select the screen and, in its Properties panel, choose the right foreground in the Foreground list.

Properties of the Articles screen: in the open Foreground list, foreground 1 “Section: Articles” is selected

Tips

iOS Guidelines : https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/