# How Flows are Structured

Understand the key concepts of a Flow: the navigation element, pages, routes, and branching.

A Flow is a collection of pages connected by routes. Unlike single paywalls, the order of pages in the sidebar doesn't determine the flow. The connections (i.e. *routes*) you create do. The Navigation element is what makes a paywall opt into becoming a Flow.

To understand flows, you only need to be aware of these core concepts to get started:

1. **Navigation Component:** The base component which contains your flow.
2. **Pages:** The content of your flow, each one is housed within a central navigation component.
3. **Routes:** The user-defined ordering of how users progress through a flow.
4. **Branches:** A way to dynamically decide which route to take.

> **Note**

Not all flows need to use branches. If your flow is a linear journey, then they aren't required.



The Navigation element [#the-navigation-element]

The Navigation element is what turns a paywall into a Flow. Without it, you have a standard paywall. With it, you unlock the Canvas view and the ability to connect pages together.

<img src="__img0" />

To add it:

1. In the left sidebar, click &#x2A;*+** to add a new element.
2. Choose **Navigation** under the "Base Elements" header.

Once added, you'll see your paywall appear in the Canvas view, ready to be connected to other pages.

Pages [#pages]

Each page in a Flow is built the same way you build a paywall. Once you have a navigation element, adding pages to it enables the Flow editing capabilities:

<img src="__img1" />

> **Tip**

A "page" here is any content you add, such a stack, into the navigation element. Each top level container creates a page in your flow.



You can add elements, style them, and configure actions just like you would with any paywall.

* A Flow can have as many pages as you need.
* Pages that aren't connected to the flow are labeled "unlinked".
* Each page can have its own products, styling, and behavior.

Once you add one or more pages, the "Flow" button the floating toolbar will become active:

<img src="__img2" />

Routes [#routes]

Routes are the connections between pages. You create them by linking one page to another in the Canvas view. To begin, you'll **click** and **drag** from the starting point of the flow to the first page you want to use:

<img src="__img3" />

* Each route defines how users move from one page to the next.
* Routes can have different animation styles (push, fade, etc.).
* The first page in your flow connects to the "flow entry point".

You can control any routes animation style by clicking on it:

<img src="__img4" />

Branching [#branching]

Routes themselves can be conditional. If you need to show different pages based on user input or attributes, you can by creating a branch. Any *route* can become a *branch*. For example:

* If a user selected "Grow subscriptions" in a multiple choice element, go to Page A.
* Otherwise, go to Page B.

Branching is configured in the route settings, not on buttons or CTAs. This keeps your flow logic centralized and easier to maintain.

The floating toolbar [#the-floating-toolbar]

The floating toolbar has been updated to support Flows. You'll find new controls for:

1. Switching between Device view and Canvas view.
2. Fitting the viewport to fit the entire flow canvas.
3. Editing branches.
4. Toggling the mini-map.

<img src="__img5" />

For more details, see [The Canvas](/docs/dashboard/dashboard-creating-flows/the-canvas).