📖 View this page in our documentation

This feature provides a native navigation toolbar that shows dependent on navigation history. By default the toolbar will show a Back button but it can be customized to also show Forward and Refresh.

By default the Contextual Navigation Toolbar will be displayed whenever there is a page in the webview history that can be returned to. This functionality makes it easier for users to navigate your app in a similar manner to your website.

[Screenshots - Just back button with < arrow, and all buttons with icons]

By default the Contextual Navigation Toolbar will show a back button with a text label "< Back". You may edit the navigation configuration object in appConfig.json to:

  • Add a Forward button
  • Add a Refresh button
  • Change the text labels to arrow icons similar to Google Chrome
  • Change the toolbar visibility settings to
    * Only show when there is a page in history (default) `anyItemEnabled`
    * Always show regardless of history `always`
    
  • Change the button visibility to only show on specific pages
    * If `anyItemEnabled` is set then the toolbar will not show if there are no buttons active
    
/* Default Toolbar */
"toolbarNavigation": {
      "visibility": "anyItemEnabled",
      "items": [
        {
          "system": "back"
        }
      ]
    }
/* Back, Forward, Refresh with text labels */
"navigation": {
  	"toolbarNavigation": {
        "items": [{
                "system": "back",
                "title": "Back"
            },
            {
                "system": "forward",
                "title": "Forward"
            },
            {
                "system": "refresh",
                "title": "Refresh"
            }
        ]
    }
}
/* Back, Forward, Refresh with icons */
"navigation": {
  	"toolbarNavigation": {
        "items": [{
                "system": "back",
                "icon": "left"
            },
            {
                "system": "forward",
                "icon": "right"
            },
            {
                "system": "refresh",
                "icon": "refresh"
            }
        ]
    }
}
/* Always show toolbar */
"toolbarNavigation": {
      "visibility": "always",
      "items": [
        {
          "system": "back"
        }
      ]
    }
/* Only show buttons on specific pages */
"navigation": {
  	"toolbarNavigation": {
        "visibility": "anyItemEnabled",
        "items": [{
          "system": "back",
          "urlRegex": [
              ".*paypal.com.*",
              ".*facebook.com.*"
            ]
          }
        ]
    }
}

Android

This is an iOS specific feature and is not supported on Android