adapt-pageNav

PageNav is a presentation component that adds basic navigation controls to a page.

When to use

Use PageNav as a replacement for the Quicknav component AND extension for both the Framework and the Authoring Tool going forwards.

Settings Overview

The attributes listed below are used in components.json to configure PageNav, and are properly formatted as JSON in example.json.

Navigation bar component which can contain some or all of the following buttons:

• _root: Navigates to the top level menu
• _up: Navigates to the menu that is the next level up in the hierarchy. For instance, a sub menu.
• _returnToPreviousLocation: Navigates to the previous location. For example, if the user navigates to a help page that is not part of the normal flow, this would take them back to the previous page that they visited
• _previous: Navigates to the previous page if it exists and is unlocked
• _next: Navigates to the next page if it exists and is unlocked
• _close: Closes the course window. Only possible if the course was launched in a popup window

The PageNav buttons will respect any locking that has been configured in Adapt. In cases not covered by Adapt's locking system - such as a start page that appears immediately before the main menu - the setting _lockUntilPageComplete can be used to disable the button until the current page has been completed.

Attributes

core model attributes: These are inherited by every Adapt component. Read more

_component (string): This value must be pageNav (one word)

_classes (string): CSS class name to be applied to PageNav’s containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space.

_layout (string): This defines the horizontal position of the component in the block. Acceptable values are full, left or right.

instruction (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

_loopStyle (string): Acceptable values are allPages, siblings, and none. Defaults to none.

• 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.

_shouldSkipOptionalPages (boolean): Skip pages that are set to "_isOptional": true. Default is false.

_buttons (object): The following attributes configure the defaults for the Page Nav buttons. These attributes are available on all of the following buttons: _root, _up, _returnToPreviousLocation, _previous, _next, and _close.

Global button configurations

_isEnabled (boolean): Turns the button on and off. Acceptable values are true and false.

_lockUntilPageComplete (boolean): For use when the standard Adapt locking system doesn't apply, such as in a start page before the main menu. Locks a button until the current page is complete. Acceptable values are true and false. Defaults to false

_order (number): Defines the display order of the button. Numerical order with 0 rendering first.

_classes (string): CSS class name to be applied to the button. The class must be predefined in one of the Less files. Separate multiple classes with a space.

_iconClass (string): CSS class name to be applied to the button icon. The class must be predefined in one of the Less files with the corresponding icon included as part of a font. To have no icon, leave this field blank. Suggested icons for each button are detailed in the example.json. See the list of all available vanilla icons to choose from.

_iconAlignment (string): Determines how the icon is aligned to the text. Options include auto, left, right, top, and bottom. When using auto, the position will automatically adjust based on whether the user is using an LTR or RTL lanaguage. The _next button will also be adjusted accordingly when using auto (i.e. the icon will be right-aligned for LTR and left-aligned for RTL). Defaults to auto.

text (string): Defines the text that renders in the button.

ariaLabel (string): This text is associated with the button. It renders as part of the aria label to give screen readers more information.

_tooltip (object): The tooltip object. Used when tooltips are enabled globally

_isEnabled (boolean): Enables tooltips on the button

text (string): The text of the tooltip

_previous, _root, _up, and _next properties

_customRouteId (string): Overrides the route ID. For use when non standard route navigation is required.

Vanilla versions: 5.1.1+
Author / maintainer: Kineo
Accessibility support: WAI AA
RTL support: Yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari for macOS/iOS/iPadOS, Opera