Selecting Tabs

Use tab selection to control which bottom tab bar item appears active in your Median app. Tabs are automatically selected when users tap them, but you can also update the active tab programmatically with the Median JavaScript Bridge or by matching page URLs with tab selection rules.

This is useful when:

• A user navigates to a tab page from a link, push notification, or redirect.
• Your website uses custom navigation instead of only the native bottom tab bar.
• You need to highlight the correct tab for dynamic routes, account pages, nested pages, or single-page app views.

How tab selection works

Median bottom tab bar items are selected automatically when a user taps a tab. The selected tab displays using the active tab color configured for your app.

For advanced navigation flows, you can control the selected tab in two ways:

Implementation Guide

Select tab via JavaScript Bridge

Use the Median JavaScript Bridge to select a bottom tab bar item from your website code.

↔️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();

Select tabs using 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
}

Best practices

Use JavaScript Bridge tab selection when your website controls the navigation state directly.

Use URL rules when the active tab should be determined automatically from the current page URL.

Use specific regex patterns for each tab to avoid conflicting active states.

Test tab selection on both iOS and Android after updating your tab configuration.

For single-page apps, update tab selection when the route changes if the app does not perform a full page load.