Setting the navigation menu style for your courses

The navigation buttons that appear in the footer of your Project can be styled in different ways. Each style lends itself more towards a certain style of navigation. You can read more about each navigation style in the Menu style overview section or learn how to change it in Configuring the menu.

If your Project has long scrolling pages, you may also want to enable section navigation to help learners navigate through page sections more quickly. You can find out how to do this in Adding a page progess indicator to your course.

 

Contents

1. Configuring the menu

i. Changing the navigation menu style using the Style

ii. Changing the navigation style from the Project editing interface

2. Menu style overview

i. Buttons

ii. Dots

 

 

Configuring the menu

There are two ways to configure the appearance of the menu

  • In a Brand Style—this will mean that your chosen menu type will be applied to all Projects that use that Brand Style
  • In a Project—this allows you to override the setting in the Brand Style and apply your chosen menu type to that Project without having to change the Style

In most cases, we recommend configuring your preferred type using your Project's Brand Style as it can apply to many Projects at once and ensure your content is consistent with your organization's brand.

For more information about how to start making a Brand Style for your organization, see Creating a Brand Style.

 

Changing the navigation menu style using the Style

1. Go to your Brand Library

2. Find the Style you'd like to change and select 

3. Open the Footer accordion

4. Select your preferred option from Select your footer navigation style:

Create, brand style, footer, navigation style drop down.png

5. Select the Save button at the top-right to save your changes

 

Changing the navigation style from the Project editing interface

1. Go to the Project you'd like to change

2. Select Brand Style from the top toolbar

Create, editing interface, top toolbar, Brand Style.png

3. Switch to the Navigation tab

Create, editing interface, Brand Style, Navigation tab.png

4. Select a style from the Select your footer navigation style drop-down menu

Selecting a Style from the Brand Style settings will override the settings applied by the Style. This means that if you select a different Style your Project, the setting you chose will take priority over the setting in the new Style.

Tip: If you've set the navigation style to be different from the Style, you can restore the Style setting by selecting Brand default. This will mean that the navigation style will go back to being what it has been set to in the Brand Style.

 

 

Menu style overview

There are two styles to choose from.

  • Buttons—traditional Next and Previous buttons
  • Dots—a numbered, dotted menu

Alternatively, you can select None if you'd prefer to have no navigation options in the footer. If this is the case, you may want to build out the navigation yourself using link buttons. To find out how to add link buttons to the page, see Adding navigation and action buttons to your Project.

 

Buttons

Buttons have a traditional style, with one button at each side of the footer. The left-side button brings the user to the previous page and the right-side button brings the user to the next page.

Create, footer, navigation buttons, next and previous.png

Both buttons have a text label that uses the page name the user is navigating to. For best results, you should give your pages a short, concise name so they fit well within the button.

There is also a home page button represented by the Home icon Create, footer, navigation buttons, home button.png. Selecting this will take the learner back to the first page of the course.

This button style is suitable if you'd like to encourage a more linear navigation style or if you have many pages in your Project that would not be best represented by the Dots style.

Dots

Dots have a more streamlined style and are great for courses where non-linear navigation is encouraged or where a more visual style is desired.

Create, footer, navigation, Dots.png

Learners can select one of the numbered dots to navigate to the corresponding page. Hovering over dots reveals the name of the page being navigated to.

Create, footer, navigation, Dots, hover, page name.png

If you have multiple chapters in your course, the Dots style will only show the pages from the chapter the learner is currently in. You may want to add a button at the end of the chapter that links to the beginning of the next one. You can find out more about how to add link buttons to your course in Adding navigation and action buttons to your Project

 

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Request support
Access support that’s tailored to you by getting in touch with our Support Team.
Send us feedback
Do you have a new feature request, or want to tell us about something that works well (or not so well) for you? Get in touch!