Median.co HomeDeveloper PortalBuild NowTerms of UsePrivacy Policy
Documentation

iOS Contextual Navigation Toolbar

Provide your users with 'back' and 'forward' navigation controls.

Suggest Edits

Overview

๐Ÿšง

iOS-only feature

The iOS Contextual Navigation Toolbar is an iOS-specific feature and is not supported on Android

Unlike Android devices, iPhones and iPads do not have a built-in back button, which can make web navigation within an app challenging. The Contextual Navigation Toolbar provides a native toolbar at the bottom of the screen, enabling users to navigate more easily based on their browsing history and the current page URL.

Key Features

  • Back Button: Returns to the previous page.
  • Forward Button (Optional): Moves forward in browsing history.
  • Refresh Button (Optional): Reloads the current page.
  • Customizable Visibility (Optional): Configure when and where the toolbar appears.

By default, the toolbar appears whenever a page exists in the webview history. This ensures a seamless user experience similar to website navigation.

Visual Toolbar Example

Back Button Back, Refresh, and Forward buttons

Configuration

Default configuration

By default, the toolbar includes a Back button with a text label (< Back). You can modify this behavior by updating the navigation configuration object in appConfig.json.

Configuration Options

  • Add Buttons:
    • Add a Forward button
    • Add a Refresh button
  • Change Toolbar Visibility:
    • Show only when there is a page in history (Default): "visibilityByBackButton": "backButtonActive"
    • Always show regardless of history: "visibilityByBackButton": "always"
  • Set Page-Specific Visibility:
    • Show on all pages: "visibilityByPages": "allPages"
    • Show only on specific pages (using regex rules): "visibilityByPages": "specificPages"
  • Customize Button Labels and Appearance:
    • Hide text labels for Back and Forward buttons
    • Use custom text labels

Dynamic Visibility

The iOS Contextual Navigation Toolbar can be dynamically enabled or disabled using the Median JavaScript Bridge.

Conditions for Toolbar Display:

  • enabled: true: The toolbar appears if any of the following conditions are met:
    • The webview has back history.
    • The forward button is enabled and the webview has forward history.
    • The refresh button is enabled.
  • enabled: false: The toolbar remains hidden regardless of other conditions.

โ†”๏ธMedian JavaScript Bridge

// Show the contextual navigation toolbar, if conditions are met
median.ios.contextualNavToolbar.set({"enabled":true});
// Hide the contextual navigation toolbar
median.ios.contextualNavToolbar.set({"enabled":false});

Implementation Examples

/* Default Toolbar */
"toolbarNavigation": {
  "enabled": true,
  "visibilityByPages": "allPages",
  "visibilityByBackButton": "backButtonActive",
  "regexes": [
    {
    "enabled": true,
    "regex": ".*"
    }
  ],
  "items": [
    {
      "system": "back",
      "titleType": "defaultText",
      "visibility": "allPages",
      "urlRegex": [{ "enabled": true, "regex": ".*" }]
    },
    {
      "system": "refresh",
      "enabled": false,
      "visibility": "allPages",
      "urlRegex": [{ "enabled": true, "regex": ".*" }]
    },
    {
      "system": "forward",
      "enabled": false,
      "titleType": "defaultText",
      "visibility": "allPages",
      "urlRegex": [{ "enabled": true, "regex": ".*" }]
    }
  ]
}

/* All Options */
"toolbarNavigation": {
  "enabled": true,
  "visibilityByPages": "allPages" | "specificPages",
  "visibilityByBackButton": "backButtonActive" | "always",
  "regexes": [
    {
      "enabled": true | false,
      "regex": ".*"
    }
  ],
  "items": [
    {
      "system": "back",
      "title": "Back",
      "titleType": "noText" | "defaultText" | "customText",
      "visibility": "allPages" | "specificPages",
      "urlRegex": [
        { 
          "enabled": true | false, 
          "regex": ".*" 
        }
      ]
    },
    {
      "system": "refresh",
      "enabled": false,
      "visibility": "allPages" | "specificPages",
      "urlRegex": [
        { 
          "enabled": true | false, 
          "regex": ".*" 
        }
      ]
    },
    {
      "system": "forward",
      "enabled": false,
      "title": "Forward",
      "titleType": "noText" | "defaultText" | "customText",
      "visibility": "allPages" | "specificPages",
      "urlRegex": [
        { 
          "enabled": true | false, 
          "regex": ".*" 
        }
      ]
    }
  ]
}

/* Example: Custom Text Labels */
"toolbarNavigation": {
  "enabled": true,
  "visibilityByPages": "allPages",
  "visibilityByBackButton": "backButtonActive",
  "regexes": [
    {
      "enabled": true,
      "regex": ".*"
    }
  ],
  "items": [
    {
      "system": "back",
      "title": "่ƒŒ้ƒจ",
      "titleType": "customText",
      "visibility": "allPages",
      "urlRegex": [
        { 
          "enabled": true | false, 
          "regex": ".*" 
        }
      ]
    },
    {
      "system": "refresh",
      "enabled": false,
      "visibility": "allPages",
      "urlRegex": [
        { 
          "enabled": true | false, 
          "regex": ".*" 
        }
      ]
    },
    {
      "system": "forward",
      "enabled": false,
      "title": "ๅ‘ๅ‰",
      "titleType": "customText",
      "visibility": "allPages",
      "urlRegex": [
        { 
          "enabled": true | false, 
          "regex": ".*" 
        }
      ]
    }
  ]
}

/* Example: Visible Specific Pages */
/* Visibility based on the first matched regex */
/* Example: For the URLs matching the first regex (FAQ page),
	 the toolbar will be hidden (because "enabled": false), while for the URLs
   matching the second regex (all Median webpages), the toolbar will be 
   visible and so on.
*/
"toolbarNavigation": {
  "enabled": true,
  "visibilityByPages": "specificPages",
  "visibilityByBackButton": "always",
  "regexes": [
    {
      "regex": "https://median.co/faq.*",
      "enabled": false
    },
    {
      "regex": "https://median.co/.*",
      "enabled": true
    },
    {
      "regex": ".*",
      "enabled": false
    }
  ],
  "items": [
    {
      "system": "back",
      "titleType": "defaultText",
      "visibility": "allPages",
      "urlRegex": [{ "enabled": true, "regex": ".*" }]
    },
    {
      "system": "refresh",
      "enabled": false,
      "visibility": "allPages",
      "urlRegex": [{ "enabled": true, "regex": ".*" }]
    },
    {
      "system": "forward",
      "enabled": false,
      "titleType": "defaultText",
      "visibility": "allPages",
      "urlRegex": [{ "enabled": true, "regex": ".*" }]
    }
  ]
}

Updated about 1 month ago