Drag and Drop
Drawer Navigator
Navigate to different screens using a clickable drawer that slides out from the side.

Video Tutorial

You can watch a video tutorial for using Navigators in your Thunkable app here:

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.

Name Your Drawers

The names displayed in the Drawer Navigator will be the names of the Screens it contains.

Drawer Navigator Properties

You have many options for styling your Drawer Navigator, such as changing the background color or tint color. Here are the different options for customization:
  • Drawer Width: Width of the Drawer in pixels
  • Drawer Position: Position Drawer swipes out from: left or right
  • DrawerOptions
    • Active Tint Color: Tint color for selected drawer.
    • Active Background Color: Background color for selected drawer.
    • Inactive Tint Color: Text color for unselected drawers.
    • Inactive Background Color: Background color for unselected drawer.

Screen-Specific Drawer Navigator Properties

When you add a Screen to your Drawer Navigator, you will a new section called Drawer Navigation Options in your Screen's Properties panel with the following properties:
Drawer Label: Set the Label of this Screen's drawer in the Drawer Navigator