# 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. 

![](/files/-LhI6iRmVOBjHTR3wSpF)

## 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](/files/-Lhr-UqCNyL69H8H7CJC)

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

![](/files/-LB2UnuFRfl9o4LrOc4O)

**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="/pages/-LZ7M7cot04-8op8PytZ" %}
[Top Tab Navigator](/snap-to-place/top-tab-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cphE4VrqW3QNN\_" %}
[Bottom Tab Navigator](/snap-to-place/bottom-tab-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7csZfTPKHHXz3SY" %}
[Stack Navigator](/snap-to-place/stack-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7crUnxWEiVveMmK" %}
[Drawer Navigator](/snap-to-place/drawer-navigator.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7clmxHDn6f7qGvq" %}
[Screen](/snap-to-place/screen.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cmwykqGn0\_edoj" %}
[Row](/snap-to-place/row.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LZ7M7cnmHPGKBKofU7K" %}
[Column](/snap-to-place/column.md)
{% endcontent-ref %}


---

# Agent Instructions: 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:

```
GET https://docs.thunkable.com/snap-to-place/layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.