The quick navigation component plugin for the Adapt authoring tool allows you to add the main navigation options to any page of the online course, to help your learners move around more easily.


As it is a component, it can be placed anywhere in the content but it’s most commonly put at the end of a page to help the user move on.


The quick navigation with all options presented


The component is highly customisable, allowing you to reorder buttons, rename them, and much more.


To get started simply add the component as you would a text, graphic or question.


The quick navigation component button

The supported buttons are:


  • Root: Go to the start of the course.
  • Up: Goes to the parent level menu.
  • Previous: Go to the page before*
  • Next: Go to the page after*
  • Siblings: Shows a button for each page in the current menu.


* The behaviour of next and previous is controlled by the Is Continuous option: 


  • allPages = loop sequentially through all pages in course,
  • siblings = loop sequentially through all pages in current parent object,
  • none = disable previous and next buttons at start and end of the pages in the current parent object


Using the Classes option it is possible to customise each button defining colours or styles with standard CSS. For example adding the following to the project custom CSS, then applying that class to each button will give round buttons.

.round{
   border-radius:40px
}


Navigation buttons with rounded corners

And finally, you can specify the class for the icon too:

.icon-home {
    content: “\e616”;
}


Navigation buttons with a home icon displayed before the main menu text