> 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/bottom-tab-navigator.md). # Bottom Tab Navigator ![Bottom tabs are a popular way to navigate an app today](/files/-LRnm6_Vi47Ty6zOcyng) ## Video Tutorial You can watch a video tutorial for using Navigators in your Thunkable app 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. ![](/files/-MXmELy66vBcvPW0yZ3o) ## Bottom Tab Navigator Properties You have many options for styling your Bottom Tab Navigator, such as changing the background color or tint color. Here are the different options for customization: | Property | Description | Data Type | | ------------------------- | ------------------------------------------------------------------- | ---------------- | | Active Tint Color | Select a text color for the tab currently in use. | Color | | Active Background Color | Select a background 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 | | Inactive Background Color | Select a color for the tab not currently in use. | Color | | Show Label Icon | Select whether to show icons, labels, or both in the Tab Navigator. | Select from menu | ## 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. For scrollable to work, the components in your screen must have heights either set in `absolute` pixels or set to `fit contents.` | 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 | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/bottom-tab-navigator.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.