📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page

Was this helpful?

Export as PDF

Last updated 7 months ago

Was this helpful?

The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking.

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.

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:

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:

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.

Top Tab Navigator

Possibly the most common style of navigation in mobile apps is tab-based navigation.

PreviousLayoutNextBottom Tab Navigator
  • Adding Navigators
  • Tab Navigator Properties
  • Adding Labels and Icons to Your Tabs
  • Step by Step Instructions
  • Enable Swiping
Using Words
Using Images