Tabs will automatically be selected when clicked and show in a highlighted/active color. You can also dynamically select tabs via the JavaScript Bridge or by setting rules based on page URL.

Select tab via JavaScript Bridge

↔️Median JavaScript Bridge

Select a tab:

Javascript

    median.tabNavigation.selectTab(1);

Note: The tabs are 0-indexed, i.e. median.tabNavigation.selectTab(1) will select the second tab

Deselect all tabs:

Javascript

    median.tabNavigation.deselect();

Selecting tabs via URL rules

A given page that corresponds to a tab bar button may be opened through other means, for example a link on another page. In this case you will want to show that tab bar button as active when the page is displayed even though there was not a click event. To achieve this functionality you may specify a URL rule as a "regex" field for each tab link defined in your JSON. This will ensure that tab button will be active whenever a page matching the rule is displayed.

In the below example we show the "My Account" tab button as active whenever a page under /account is displayed within the app.

/* Regex Tab Selection Example */
{
  "tabSelectionConfig": [
    {
      "id": "1",
      "regex": ".*"
    }
  ],
  "tabMenus": [
    {
      "id": "1",
      "items": [
        {
          "subLinks": [],
          "label": "My Account",
          "icon": "fas fa-user",
          "url": "https://domain.com/account",
          "regex": "https://domain\\.domain/account.*"
        }
      ]
    }
  ],
  "active": true
}