Navigation

Navigation

The following covers Core navigation functionality: sorting order, button API and tooltip API.

Navigation sorting order

The sorting order was introduced to give flexibility in the visual display of the navigation bar as well as accessibility compliance with WCAG 2.0 Making the DOM order match the visual order. The sorting of buttons is according to a data-order attribute in the DOM which is configured by _navOrder in course.json _globals._extensions.

Core navigation:

    "_extensions": {
      "_drawer": {
        "_navOrder": 100
      },
      "_navigation": {
        "_skipButton": {
          "_navOrder": -100
        },
        "_backButton": {
          "_navOrder": 0
        },
        "_spacers": [
          {
            "_navOrder": 0
          }
        ]
      }
    }

Navigation plugins also support _navOrder, for example pageLevelProgress or Visua11y.

Sorting order is typically defined by a range from 0 (far left for LTR) to 100 (far right for LTR). Items positioned between 0 to 100 are usually in increments of 10.

_spacers can be used to create space between nav items. The default separates out the left and right aligned items. Multiple spacers can be used depending on the desired layout e.g. two spacers would give you left, centered and right aligned items (see below).

Visual navigation display:



DOM order:



JSON in course.json _globals:

    "_extensions": {
      "_drawer": {
        "_navOrder": 100
      },
      "_navigation": {
        "_skipButton": {
          "_navOrder": -100
        },
        "_backButton": {
          "_navOrder": 0
        },
        "_spacers": [
          {
            "_navOrder": 20
          },
          {
            "_navOrder": 80
          }
        ]
      },
      "_navigationTitle": {
        "_navOrder": "30"
      },
      "_close": {
        "_navOrder": "150"
      }
    }

Navigation button API

The navigation button API was created to allow extensions to define buttons and add them to the navigation bar rather than allowing DOM injection.

• Backward compatible with injection
• Text label based upon the button aria label
• Ordering
• Icons
• Show/hide text

Navigation tooltip API

JSON in course.json to enable / disable globally:

"_tooltips": {
  "_isEnabled": true
}