Mission 10 - Navigation Bar

Estimated time for completing this mission: 15 mins

Learning Objective

Create a navigation bar with multiple pages.

Navbar makes the navigation easier and the whole app more professional.

Logic BLOX

MyData/FinalData

Basics/Start

Database/Table

Database/GroupBy

Charts/Pie Chart

App BLOX

Table

Chart

Panel

Label

Navbar

Image

The same data set will be used as for the previous exercise. In case you do not have the data set you can download it here: FinalData.xlsx

Please refer to Navigation Guide to perform the steps below

App Designer:

In Module4 create new app named Navbar
First, in the header area, drop in a "Navbar" BLOX and create three items (to do that you have to double click on the Navbar BLOX and click on the "Add +" button on the top left corner)
Under item 1 create two sub-items and under item 2 create one sub-item (to achieve that, click on the small arrows next to the items and then chose "add" from the dropdown)
The image below show the structure of the Navbar (Note that you can name the items yourself)
Create four pages and link all the sub-items (in our example "Data", "Chart", "Introduction" and "Image" items) to a different page
You can add pages by clicking on the "+" button on the top left corner in the App Designer view
To link items to pages you have to double click on the Navbar BLOX, then click on the arrow on the right-side of the selected item and hover your mouse on the "Pages" option, then you can select the page which you want to link the current item
You can rename each page so it is more meaningful
As a challenge you will have to create content for each page! (below we will describe some potential solutions)

The images below show the Navbar at the top with different items and sub-items. Moreover, there is a video with the full functionality for clarity.

The results below showing different pages with different content, but feel free to be creative and fill the pages with your content.