Dynamic Tab Menu

📘

Similar to the Sidebar Navigation Menu, tab menu items can also be loaded dynamically from your website using the Median JavaScript Bridge. The tab menu items can be loaded on specific pages or subsequent to events such as a user login flow.

A default tab menu can be defined in the app configuration and can be overwritten dynamically as required. Alternatively, the configuration can be left blank and all tab menus set by the website. The visibility of the tab menu can also be toggled dynamically at runtime.

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

Set/change the tab buttons:

Javascript

var tabItems = [{
              "icon": "fas fa-cloud", //optional
              "label": "Tab 1",
              "url": "javascript:alert('You selected tab 1')"
          }, {
              "icon": "fas fa-globe", //optional
              "label": "Tab 2",
              "url": "javascript:alert('You selected tab 2')"
          }, {
              "icon": "fas fa-users", //optional
              "label": "Tab 3",
              "url": "javascript:alert('You selected tab 3')"
          }];
median.tabNavigation.setTabs({'enabled': true, 'items': tabItems});

Hide the tab menu:

Javascript

median.tabNavigation.setTabs({'enabled': false});