> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getnativeflow.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Pages and Navigation
> Add pages from a template, rename and delete them, and give navigation somewhere to go.
## Overview
A project starts with a single page called **Page 1**. Everything you build sits on a page, the canvas shows one page at a time, and every navigation action in Studio points at a page by name. So a second screen in your app means a second page here first.
The **Pages** list is where all of that happens: add, switch, rename, save as a template, delete.
Open the **Component Tree** panel from the left sidebar — the layers icon. The **Pages** list sits at the top, with a count beside it and an **+ Add Page** tab next to it.
Everything below the divider is the **active page's** component tree, headed with that page's name. Switch pages and the tree below switches with it.
The recording above is a real, unscripted session, on a page created purely for the recording and deleted again by the end — it never touches any of the project's other pages. It runs at automation speed with no narration.
## Add a page
Click **+ Add Page**. The panel swaps from the page list to a template picker — this is not a name prompt, and there is nowhere to type a name yet. You name the page after it exists.
Categories expand in place. **Basic** holds the three plain starting points; everything else is a ready-made screen you can strip back.
| Category | Templates |
| - | - |
| **My Templates** | Your own saved pages. Empty until you save one |
| **Basic** | 3 |
| **Authentication** | 5 |
| **Onboarding** | 1 |
| **Dashboard & Overview** | 3 |
| **List & Data** | 3 |
| **Detail & Forms** | 4 |
| **Workflow & Approval** | 2 |
| **Communication** | 4 |
| **Navigation & Account** | 4 |
| **Empty, Error & System States** | 4 |
The three under **Basic** are the ones worth knowing by heart:
* **Blank Page** — an empty container, and nothing else.
* **Scroll Page** — a vertically scrolling page, prefilled with a section title and content blocks to replace.
* **Navigation Header Page** — uses the native navigation header: back on the left, title in the middle, action on the right.
The page is created and becomes the active page straight away, and the panel returns to the Pages list with the new page selected.
It is named after the template, not after you: **Blank Page** produces a page called `Blank`. Add a second and Studio numbers it `Blank (2)`, then `Blank (3)`. Rename it next — a project full of `Blank (4)` is nobody's friend.
## Rename a page
**Double-click the page's row.** The name turns into an inline text field. Type the new name and press Enter.
There is no rename control in the Add Page picker, and none in the row's hover buttons. Double-click is the whole mechanism.
**Page names must be unique, and a clash fails silently.** Rename a page to a name another page already has and nothing happens — no error, no message, the row simply keeps the name it had. If a rename appears not to have worked, look for the name already in use further up the list.
Give the rename a moment to save before reloading or closing the tab. Studio saves on a debounce, and a rename followed immediately by a reload can come back showing the old name.
## Switch between pages
Click any row in the Pages list. The canvas, the component tree below the list, and the Preview all follow the active page — they only ever show one page at a time.
This is worth remembering when something you built seems to have vanished: check which page is selected before assuming the work is gone.
## Save a page as a template
Hover a page's row and two controls appear on the right.
**Save as template** asks to confirm, and tells you exactly what it does: *Save "Page 1" as a template in My Templates? It will be available in the Add Page tab across all your projects.*
The saved template takes the page's current name, and shows up under **My Templates** in the Add Page tab — in this project and every other project of yours.
## Delete a page
The second hover control is **Delete page**. It asks first: *Are you sure you want to delete "Checkout"? This action cannot be undone.*
The dialog means it — there is no undo for a deleted page, and everything on it goes too.
Before deleting, check whether anything navigates to it. A **Navigate To** action configured on another page pointed at this one by name, and removing the target leaves that action with nothing to open.
## Pages are what navigation points at
Navigation actions are configured per component, on a component's own **Actions** tab, and **Navigate To** offers a **Target Page** dropdown listing every page in the project. A page has to exist before anything can navigate to it, which is why building a flow usually means creating the pages first and wiring the buttons second.
* To wire a button to a page, see [Component Interactions](/features/component-interactions).
* For a page's own settings, variables and lifecycle events such as On Screen Load, see [Page Configuration](/guides/page-configuration).
* For what **Navigate To** and the other 21 actions take as parameters, see the [Action Reference](/reference/actions).
## Summary
Pages live at the top of the Component Tree panel. **+ Add Page** opens a template picker — 33 ready-made pages across ten categories, plus your own under My Templates — and creates the page already active, named after its template. Rename by double-clicking the row, remembering that duplicate names fail silently. Hovering a row offers **Save as template**, which shares that page with all your projects, and **Delete page**, which cannot be undone. Everything that navigates does so by page name, so the pages come first.