> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/top-tab-navigator.md). # Top Tab Navigator Possibly the most common style of navigation in mobile apps is tab-based navigation. The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhqy-VdAehmUOnpqngj%2F-Lhr-UqCNyL69H8H7CJC%2Fimage.png?alt=media\&token=64681406-362f-46c1-8c0e-be33cee30a2b) ## Video Tutorial You can watch a video tutorial that explains all of the Navigators here: {% embed url="" %} ## Adding Navigators To add a navigator to your app, click **Screens +** at the top of your component tree. \ Select **Add Navigator** and select the Navigator you want to add. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXmBLkEGfcIGxS-Zz0s%2F-MXmELy66vBcvPW0yZ3o%2FScreen%20Shot%202021-04-08%20at%205.06.23%20PM.png?alt=media\&token=ed782e01-ca98-4aeb-81d9-06bac5036160) ## Top Tab Navigator Properties You have many options for styling your Top Tab Navigator, such as changing the background color or tint color. Here are the different options for customization: | Property | Description | Data Type | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------- | | Swipe Enabled | Allow the user to swipe between screens. | True/False | | Animation Enabled | Select whether to animate the transitions between screens. | True/False | | Lazy | If `true`, tabs are only loaded once the tab is opened. If `false`, all tabs are loaded when the Tab Navigator is first opened. | True/False | | Background Color | Select a color for the top tab navigator. | Color | | Tab Indicator Color | An underline will appear underneath the tab you select. You can select a color for the underline | Color | | Active Tint Color | Select a text color for the tab currently in use. | Color | | Inactive Tint Color | Select a color for the text of the tabs that are not in use. | Color | | Show Label Icon | Select whether to show icons, labels, or both in the Tab Navigator. | Select from menu | ### Advanced Properties | Property | Description | Data Type | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------- | | Uppercase Label | Make the text for all the tabs upper case. | True/False | | Press Color (Android only) | Color of material ripple as a tab is pressed. | Color | | Press Opacity (Android only) | Opacity of material ripple as a tab is pressed. | Number | | Tab Indicator Height | An underline will appear underneath the tab you select. This section will allow you to choose how tall the underline is. | Number | ## Adding Labels and Icons to Your Tabs When designing a tab, you can use words or images to guide users to different screens. ![Using Words](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhqy-VdAehmUOnpqngj%2F-Lhr-UqCNyL69H8H7CJC%2Fimage.png?alt=media\&token=64681406-362f-46c1-8c0e-be33cee30a2b) ![Using Images](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhqy-VdAehmUOnpqngj%2F-Lhr41TkO1pVjpfUd4H-%2Fimage.png?alt=media\&token=f0e187dc-138a-4bd5-b6e0-f661d26db2d3) ## Tab-Specific Properties Click on a tab in your design to access the properties panel for that specific tab. ### Screen | Property | Description | Data Type | | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Navigation Button Name | Text that appears in the top tab navigator. | Text | | Scrollable | Select whether your user can scroll on this screen. | True/False | | Background Color | Select the tab's background color. | Color | | Background Image | The image file to be shown in the tab's background |

PNG, JPG, GIF, SVG, etc.
Can also use URL that ends in file extension (eg )

| | Background Image Resize Mode | Set how image is shown if the file and the tab component have different dimensions/aspect ratio |

Select from list \[cover, contain, stretch, repeat, center]

| | Orientation (iOS and Android only) | Toggle whether your end user can swipe a list item to the left to view an additional Button. Reveals Left Swipe Button settings if set to `true` | True/False | ### Tab Navigation Options | Property | Description | Data Type | | ----------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Tab Bar Label | Set the Label of this Screen's tab in the Tab Navigator | Text | | Active Tab Icon | Set the Icon of this Screen's tab in the Tab Navigator for when the Screen is active |

PNG, JPG, GIF, SVG, etc.
Can also use URL that ends in file extension (eg )

| | Inactive Tab Icon | Set the Icon of this Screen's tab in the Tab Navigator for when the Screen is inactive |

PNG, JPG, GIF, SVG, etc.
Can also use URL that ends in file extension (eg )

| | Tab Bar Visible | Set whether the Tab Navigator is visible when this Screen is open | True/False | ### Status Bar The status bar is located at the top of a phone's screen. The status bar displays information regarding signal strength, battery, and whether or not things like the alarm or wi-fi are enabled. | Property | Description | Data Type | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | | Visibility | Decide whether you want the status bar visible on the screen. | True/False | | Style | Default is best practice, but you can select light-content or dark-content to potentially override the user's phone settings. | Select from menu (default, light-content, dark-content) | | Color (Android only) | Color of the status bar. | Color | | Translucent (Android only) | When translucent is set to true, the app will appear under the status bar. | True/False |