(Last Updated On: January 16, 2023)

With a navigation menu, learners can easily make their way around your eLearning courses or presentations and reach their destination. Let’s learn how to create a navigation menu with ActivePresenter. 

a sample of navigation menu

You may be familiar with navigation bars, panes, or menus on any file or web browser.  A navigation menu is often located on the top or left side of the website. It displays an organized list of all the content from one dedicated area. When you select one from the list, you can access information or be directed to the corresponding location. To create things like that, you need coding skills which seems to be hard for inexperienced users. If you just want a navigation menu or presentations, it’s much easier to do thanks to ActivePresenter. From version 9 of the app, creating a navigation menu with one of the new features – Dropdown is a piece of cake. To see how it works, download ActivePresenter 9 and open this sample.

Download ActivePresenter

Today, let’s dive into this blog to learn how to create a navigation menu with ActivePresenter 9. The steps covered are as follows:

Let’s get started!

Prepare for Creating a Navigation Menu

As you can see, the sample is a report about Vietnam’s leading agricultural products export for the period 2017 – 2021. The project consists of 1 opening slide and 5 content slides. The opening slide is created with a background image, title, a dropdown that shows a list of productions, and the sources of data. Each content slide contains a shape, a chart, a picture of an export product, and a button. Among those objects, some are available in the app such as shapes, text, charts, and buttons. So, you need to prepare for the rest of the resources. They are:

  • A background image for the opening slide; 
  • 5 pictures of the products. You can import them to the Resources pane in advance (View tab > Resources > click to import the pictures).
  • Data of exporting agricultural products. In this sample, it is public on related websites of the Vietnam government. 

When you finish collecting all of them, get ready to start the next step.

Create the Navigation Menu 

The navigation menu in the sample is actually a dropdown that is inserted into the opening slide. When it is active in the course, simply click the dropdown arrow of the dropdown. It will show you a list of leading export products. Select a product on that list and you will be directed to the corresponding content slide containing the product information. If you want to go back to the opening slide to select another product, click the “Back to Products”  button on the opening slide. Repeat the steps to explore the project. In short, to create a navigation menu, perform the following steps:

Create Opening Slide

The opening slide has 3 main parts: title, dropdown, and the source of data. The first and the third ones are text objects. The dropdown can be inserted into the slide with a few clicks. Remember to add a background image to the slide beforehand (Properties pane > Slide Properties tab > Background Image section > select a background image from the project or import it from your computer). 

Now, let’s create the text objects and the dropdown one by one.

Create the Title and the Source of Data on the Slide

To create those text objects:

  • Add 2 text captions to the slide (Insert tab > Text Caption).
  • Click each text box > add the title and the source of the data. 
  • Style them the way you wish.
  • Drag them to the desired position. 

Next, you can insert a dropdown into the slide. 

Insert a Dropdown into the Slide

Follow the steps below to add a dropdown to the slide:

  • Insert a dropdown (Insert tab > Dropdown).
  • Style it for a better look (select the dropdown > Format tab > choose a preset style in the Dropdown Styles list. Alternatively, you can use tools in the Dropdown Tools, Quick Style, and Style Tools in the same tab). 

Change the Dropdown Properties

Now you can change the properties of the dropdown in its Properties pane > Interactivity tab > Dropdown section. In detail, you need to:

  • Name the hint item “Products” (click on the Hint Item box > type “Products”).
  • Add 5 items, namely “Rice”, “Coffee”, “Rubber”, “Cashew nuts”, and “Green tea” to the Item List (click > type the names of those items).
dropdown properties for a navigation menu

That’s how to create the opening slide. In the next part, let’s learn how to create content slides.

Create Content Slides

content slide

Each content slide has 3 parts: a chart, an illustrated picture of a product, and the “Back to Products” button. 

Insert a Column Chart into the Content Slide

As you may know, the latest version of ActivePresenter allows you to add column charts to your project. In this sample, the chart shows the information on an exported agricultural product in a column chart format. The orange and green columns represent the exported volume and the value respectively. To add a chart like that to the slide, do the following steps:

  • Insert a column chart (Insert tab > Chart > Column).
  • Edit data in the Chart Data.
    • Add and name the Category as years from 2017 to 2021.
    • Name the Dataset as the exported volume and value. Both have the corresponding units. For example, “Export Volume (million tons)”.
dataset in a content slide
  • Style the chart:
    • Change the chart title. 
    • Style the columns (select the chart > Properties pane > Chart tab > Style section > style each dataset).
    • Change the style of the title and chart legends.

Insert an Illustrated Picture 

To insert the picture, simply drag it from the Resources pane to the slide. 

Create the “Back to Products” Button

The button in the content slide is to navigate learners back to the opening slide with a click. So, they can choose to check other content slides. To create the button, follow the steps below:

  • Add a button (Insert tab > Button).
  • Name it “Back to Products”.
  • Style it the way you want (Format tab > choose a built-in style in Quick Styles, or use tools in Style Tools to style the button).
  • Add the On Click event to the button (navigate to its Properties pane > Interactivity tab > Events – Actions section > click > select On Click).
  • Add the Restart Presentation action to the button (click on the event > Restart Presentation).

Note that, don’t forget to untick the Auto Advance checkbox. Then, copy and customize this slide to create more content slides. Remember to set each slide with a meaningful name so you can recognize them in the next step. 

Add Events – Actions to the Dropdown in the Opening Slide

The last step to creating a navigation menu is to add events and actions to the dropdown in the opening slide. By doing so, when you select a value in the dropdown list, it navigates you to the corresponding content slide. To do that:

  • Add the On Change event to the dropdown (navigate to its Properties pane > Interactivity tab > Events – Actions section > click > select On Change).
  • Add Go to Slide action > select the corresponding content slide. Repeat the step until all the content slides are linked.
  • Set the condition to the action. This helps the navigation menu direct you to the right content slide. To do that, select values as shown in the picture below:
add condition to the navigation menu
  • Click Add to finish adding the condition.

To make the project more engaging when it works, add the Play Audio action > Correct 1 to the On Change event. Finally, you get the On Change event of the dropdown like this:

events - actions of a navigation menu

Preview, Export, and Share the Project

To check how the navigation menu works, press F5 or click the HTML5 icon .

To export the project to eLearning output and share it with your learners, navigate to the Export tab > select one of the outputs you wish. The app lets you export it to HTML5, SCORM, and xAPI packages.

That’s how to create a navigation menu with ActivePresenter 9. Download the app and try all the features unlimitedly. Follow our Tutorials page, Blog, and YouTube channel for more information. If you have any questions, feel free to contact us at email support@atomisystems.com.

See more:

Create an Interactive Timeline Slider in eLearning Course