# Top Tab Navigator The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking. ![](https://689802330-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) {% embed url="" %} ## Adding Navigators To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
## 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: #### Simple Properties * **SwipeEnabled:** Allow the user to swipe between screens. * **AnimationEnabled:** Select whether to animate the transitions between screens. * **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. * **Background Color:** Select a color for the top tab navigator. * **Tab Indicator Color:** An underline will appear underneath the tab you select. You can select a color for the underline. * **Active Tint Color:** Select a font color for the tab currently in use. * **Inactive Tint Color:** Select a color for the text of the tabs that are not in use. * **ShowIcon:** Toggle whether to show icons in the Tab Navigator. * **ShowLabel:** Toggle whether to show tab labels in the Tab Navigator. #### Advanced Properties * **Upper Case Label:** Make the text for all the tabs upper case. * **PressColor:** Color of material ripple as a tab is pressed * **PressOpacity:** Opacity of material ripple as a tab is pressed * **ScrollEnabled:** Toggle whether to enable scrollable tabs * **Tab Indicator Height:** An underline will appear underneath the tab you select. This section will allow you to choose how tall the underline is. ## 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://689802330-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://689802330-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) ## Step by Step Instructions Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator. Step 2. Select the Top Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches: ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhqy-VdAehmUOnpqngj%2F-Lhr6kzxKoruyluoPO9w%2Fimage.png?alt=media\&token=e25162de-77f9-4baa-83f7-bbfb723ab2ca) Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content: ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhr94E-7B-XOxpbWQqx%2F-LhrBhGN5k2eaOjYTHQu%2Fimage.png?alt=media\&token=740f938a-e4d2-4657-a572-2cb12be5761b) Additional descriptions are below: **Tab Bar Label** -- The name of your tab label **Active Tab Icon** -- Icon that appears when tab is selected; You can upload an image for this icon. **Inactive Tab Icon** -- Icon that appears when tab is not selected; You can upload an image for this icon. ## Enable Swiping Swiping is a popular way to move through screens and is enabled by the Tab Navigator. You can enable the swipe feature by clicking the "SwipeEnabled' switch. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhqy-VdAehmUOnpqngj%2F-Lhr80yePh-amu9YvTd7%2Fimage.png?alt=media\&token=627a6121-14aa-4d13-a185-dee16339738a) {% embed url="" %}