# Layout

## From Idea to App 

To go from an idea to app, we strongly recommend that you sketch out your vision using the below app templates. It's important to first create a roadmap for how people will interact with your app. 

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LhI4N8W4WrpuRYLw2XG%2F-LhI6iRmVOBjHTR3wSpF%2Fimage.png?alt=media\&token=5b3366bd-3b10-44d0-9820-e5b55739a7ba)

## Navigator Tutorial

{% embed url="<https://youtu.be/Z9R_kg4ew2M>" %}

## Arrange Screens with Navigators

Most apps navigate through screens using navigators. Click [here](https://www.youtube.com/watch?v=Z9R_kg4ew2M) to watch a tutorial on how to use each navigator.&#x20;

Here are three examples of navigators that you can use on Thunkable.

1. [**Bottom**](https://docs.thunkable.com/bottom-tab-navigator) **and** [**Top Tab**](https://docs.thunkable.com/top-tab-navigator) **Navigators** - These navigators allow you to change screens by clicking on icons at the top or bottom of the screen.&#x20;

![Top Tab Navigator](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)

**2.** [**Drawer Navigators**](https://docs.thunkable.com/drawer-navigator) - A navigator that pulls out a side menu of different options to choose from.&#x20;

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LB2UmWU0aNj_RRTtfkl%2F-LB2UnuFRfl9o4LrOc4O%2FThunkable%20Documentation%20Exhibits%20\(83\).png?alt=media\&token=c47b73e1-6d11-408e-b2dd-26e271c47ebf)

**3.** [**Stack Navigators**](https://docs.thunkable.com/stack-navigator) - Navigators that allow you to stack screens on top of other screens.

## Layout Components

{% content-ref url="top-tab-navigator" %}
[top-tab-navigator](https://docs.thunkable.com/snap-to-place/top-tab-navigator)
{% endcontent-ref %}

{% content-ref url="bottom-tab-navigator" %}
[bottom-tab-navigator](https://docs.thunkable.com/snap-to-place/bottom-tab-navigator)
{% endcontent-ref %}

{% content-ref url="stack-navigator" %}
[stack-navigator](https://docs.thunkable.com/snap-to-place/stack-navigator)
{% endcontent-ref %}

{% content-ref url="drawer-navigator" %}
[drawer-navigator](https://docs.thunkable.com/snap-to-place/drawer-navigator)
{% endcontent-ref %}

{% content-ref url="screen" %}
[screen](https://docs.thunkable.com/snap-to-place/screen)
{% endcontent-ref %}

{% content-ref url="row" %}
[row](https://docs.thunkable.com/snap-to-place/row)
{% endcontent-ref %}

{% content-ref url="column" %}
[column](https://docs.thunkable.com/snap-to-place/column)
{% endcontent-ref %}