Dynamic Tab Menu

The Median JavaScript Bridge lets your website change the native bottom tab bar while the app is running. Use it to select a tab, replace the tab items, or hide the bar, without rebuilding or resubmitting your app.

You can combine dynamic tabs with a default menu in two ways:

• Default plus overrides. Define a default tab menu in your app configuration and overwrite it from your website when needed, for example after a user signs in.
• Fully dynamic. Leave the tab configuration blank and set every tab menu from your website.

Before you begin

• Enable the Bottom Tab Bar for your app.
• Run these commands only inside your Median app. See Detecting App Usage.
• Call the bridge after it has loaded. See JavaScript Bridge Overview.

Implementation Guide

Select a tab

Highlight a tab by its position in the menu.

median.tabNavigation.selectTab(1);

Note: Tabs are zero-indexed. This means the example below selects the second tab.

Deselect all tabs

Remove the highlight from every tab. This is useful on pages that do not belong to any tab, such as checkout for e-commerce sites.

median.tabNavigation.deselect();

Set or change the tab items

Pass an array of tab items to setTabs(). The array replaces the entire menu, so always include every tab you want to display.

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 });

Tab item properties

Hide the tab bar

Fully hide the bottom navigation bar.

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

To show the bar again, call setTabs() with enabled: true and your tab items.

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.

Proof of concept: change a Sign In tab to an Account tab after login

A common pattern is to show a Sign In tab to signed-out users and replace it with an Account tab, with a different icon, once they sign in.

There is no method that edits a single tab. Instead, rebuild the full items array with the correct last tab and pass it to setTabs().

How it works

1. Define the tabs that never change, plus one tab object for each authentication state.
2. On every page load, check whether the user is signed in and call setTabs() with the matching array.
3. In a single-page app, call the same function again from your login and logout handlers.

Step 1: Add the script to your website

Add this script to every page, either in your site template. Replace the URLs and the body of isUserSignedIn() with your own.

(function () {
  // Tabs shown in every state
  var BASE_TABS = [
    { icon: 'fas fa-home',   label: 'Home',   url: 'https://example.com/' },
    { icon: 'fas fa-search', label: 'Search', url: 'https://example.com/search' }
  ];
 
  // The tab that changes with authentication state
  var SIGN_IN_TAB = {
    icon: 'fas fa-sign-in-alt',
    label: 'Sign In',
    url: 'https://example.com/login'
  };
  var ACCOUNT_TAB = {
    icon: 'fas fa-user-circle',
    label: 'Account',
    url: 'https://example.com/account'
  };
 
  // Replace with your own check: a server-rendered flag,
  // a readable session cookie, or your auth SDK response.
  function isUserSignedIn() {
    return Boolean(window.APP_USER && window.APP_USER.id);
  }
 
  function isMedianApp() {
    return navigator.userAgent.indexOf('median') > -1;
  }
 
  function updateAuthTab(signedIn) {
    if (!isMedianApp() || !window.median) return;
 
    var authTab = signedIn ? ACCOUNT_TAB : SIGN_IN_TAB;
 
    median.tabNavigation.setTabs({
      enabled: true,
      items: BASE_TABS.concat(authTab)
    });
  }
 
  // Expose for login and logout handlers
  window.updateAuthTab = updateAuthTab;
 
  // Runs when the Median JavaScript Bridge is ready
  window.median_library_ready = function () {
    updateAuthTab(isUserSignedIn());
  };
})();

Step 2: Update the tab when the user signs in or out

If sign-in triggers a full page load, Step 1 already handles the change on the next page. If your site is a single-page app, or sign-in completes without a reload, call updateAuthTab() from your own handlers.

// After a successful sign-in
function onSignInSuccess(user) {
  window.APP_USER = user;
  window.updateAuthTab(true);
}
 
// After sign-out
function onSignOut() {
  window.APP_USER = null;
  window.updateAuthTab(false);
}

Step 3: Test in your app

1. Open the app while signed out. The last tab shows Sign In with the sign-in icon.
2. Sign in. The last tab changes to Account with the user icon.
3. Close and reopen the app while still signed in. The Account tab is restored on page load.
4. Sign out. The last tab returns to Sign In.

Tips

• Match the default menu to the signed-out state. Set the Sign In version as the default in the Bottom Tab Bar Visual Editor so first-time users see the correct tabs before your script runs.
• Reapply on every page load. Treat your website as the source of truth and set the tabs each time the bridge is ready, so the menu stays correct after an app restart.
• Restore the highlight if needed. If replacing the menu clears the selected tab, call median.tabNavigation.selectTab(index) after setTabs().
• Keep the tab position stable. Swapping a tab in place is less disorienting than adding or removing tabs.

Troubleshooting

Frequently asked questions

Can I update just one tab?

No. setTabs() replaces the whole menu. Rebuild the full array and change only the item you need, as shown in the proof of concept.

Do I need to publish a new app version to change the tabs?

No. Dynamic tabs are set by your website at runtime, so changes take effect as soon as you deploy your web code.

Can I change only the icon and keep the label?

Yes. Pass the same label and url with a different icon value.