This lesson will guide you through the steps of setting up a navigation system. There are many types of navigation patterns, and you will learn the basics needed for most navigation patterns.
The lesson starts with a list containing cards showing travel destinations. During the lesson, we'll make each card navigate to a detailed page for the destination.
Click "Next" to get started!
A navigation system is built out of three elements:
1. A Page Router node, which works as a visual node in the visual hierarchy, controlling what page to show.
2. Multiple Page Components that each contains a page of an application.
3. A Navigate node that lets you navigate from one page to another.
Let's start by looking at the project.
This lesson starts with a pre-made list containing cards for travel destinations. If you already did Lesson 02 this might seem familiar.
Everything is in the App component, but we will soon be moving the destination cards into their own page. We'll also navigate to a new page when a card is clicked.
Let's start by looking at the Page Router node and how to set it up.
Click "Next" to continue
During this tutorial, you will be given multiple tasks. Spot them in the tutorial timeline by the “Task” label.
Click on the card to get a hint of how to complete the task.
Click "Next" to continue.
The Page Router node is a visual node and takes up space on the screen. Any page you navigate to will become a child of the Page Router and use the space available to the Page Router.
The other nodes in the visual hierarchy in the App component will stay active when navigating. A menu and footer could be placed outside of a page, and live next to the Page Router node in the hierarchy. Since navigation only affects the contents of the Page Router the menu and footer will stay in place.
Let's start by placing a Page router node into our App component.
Place a Page Router node as a child to the Group node called Max width: 600px
Now that we have our Page Router node, our next step is to add pages to it. This can be done from the property panel, with the Page Router node selected.
The "Add new page" button allows you to assign existing pages to be part of this Page Router, or to create new pages. If we already had Page components in the project we could simply add them to our Page Router from here, but we don't have any pages yet.
You can create new pages from here by clicking the "+" icon at the top of the popup window where it says Create new page.
Click "Next" to start creating a new page.
Create a new page called List page
Create another new page called Description page
A page in Noodl is also called a Page Component as it in many ways works like any other visual component in Noodl.
To change the content of a page we can open the page component from the component sidebar, or by clicking on it in the component canvas. By default, a page component comes with two nodes:
1. A Page node. This is the visual root of the page, and all children will be part of the page.
2. A Page Inputs node. This node is used to send data when navigating to the page. This data is also added to the URL of the page so it can be bookmarked, or revisited later through a link.
Let's move our list of destination cards to our newly created page called List page
Click "Next" to continue.
Make the List content Group a child to the Page node.
Once we added the nodes for our list of cards to the Page list, they become visible in our preview.
This is because the List page is set to be the start page inside the Page Router.
We can change the start page from the menu on each page item in the Page router node's property panel. For now let's change the start page to be the Description page, as we will be working on that soon.
Click "Next" to continue.
Go back to the App component, and modify the Page Router so that the Description page is set as the start page
Our preview now becomes blank, and that's because the Description page is currently empty.
The purpose of this page is to show more details after clicking on one of the destination cards.
We will add a back button, an image, a title, and a description to the Description page.
Click "Next" to start designing this page.
We now have a layout on the page, so let's add a few nodes so we can have a working navigation flow between the List page and the Description page.
As we are on the Description page, we can add a Navigation node that points to the List page, which gets triggered when the "go back" button is clicked.
The Navigation node has a Target page property where we can select what page it should navigate to.
Click "Next" to start creating the Navigation node.
Great! Now we can click the "Go back" button to navigate to the List page.
Let's add another Navigate node to our Destination list item component so we can navigate back and forth between the two pages.
Let's also set the start page back to the List page.
Click "Next" to finish the navigation flow
Well done! We now have a flow between the two pages, and this navigation pattern is all you need to know to create most navigation patterns.
Do you feel ready to send some data to a page as we navigate to it?
Click the "next" button when you feel ready!
The Description page now has a simple layout that we can use to display more details about a destination, once we click on a destination card.
Our list of destinations is created with data from a Static Array node, and we want to make the data associated with a clicked destination card available inside of the Description page.
We can do this by adding a Path parameter on the Page Input node of the page we want to navigate to.
When we create a Page Component it comes with a Page Input node. It defines the input parameters to a page.
The Page Input node has two types of parameters: Path parameters and Query parameters.
A Path parameter becomes a part of the Page's URL. In our case, this is helpful if we want to get a complete URL that points directly to the Description page for a specific destination.
A page can also have query parameters, which are appended to the end of the URL after a `?` mark.
When a destination card is clicked we want to send the id of the Object with the data for that destination, so we can access the data on that page.
We'll achieve this by adding a Page parameter to the Destination page and connecting that to the Id property on the Object node.
In the next step let's add a Path Parameter called object id to the Page Input node in our Destination page. Click "Next" to continue.
When we create a Path parameter on the Page Input node, we create a new input on every Navigate node that is targeting the page containing the Page Input node.
Let's go back to the Destination List item component and connect the Object node's id to Navigate node
Great! We now have everything in place and a working navigation system that sends data between the pages.
Refresh the preview, and close this popup to try it out a bit. When you are done, click the lesson step to finish this lesson.
You've completed this lesson, we hope you liked it!
To take your Noodl skills to the next step, we recommend watching our Todo list app videos where you will learn how to build a working app from scratch.
Happy Noodling!