📘
Specify icons, text labels, and links to include in each tab menu item. You can create multiple bottom tab bar menus and set different visibility rules to show each menu based on the page that is displaying within your app. Preview your tab bar menus on iOS and Android in Light and Dark mode.

Trigger JavaScript Commands from Tab Menu Options

If you'd prefer your links to trigger various JavaScript commands, you may wish to specify URLs in the Visual Editor with the following syntax (Option 1). Alternatively, you can set the URL with the JavaScript command directly in the JSON (Option 2).

/* Option 1 - Visual Editor */
javascript:alert('test');

/* Option 2 - JSON */
{
  "tabSelectionConfig": [
    {
      "id": "1",
      "regex": ".*"
    }
  ],
  "tabMenus": [
    {
      "items": [
        {
          "subLinks": [],
          "icon": "fa-home",
          "label": "Home",
          "url": "javascript:alert('test')" //specify javascript commands like this
        },
        {
          "subLinks": [],
          "icon": "fa-search",
          "label": "Search",
          "url": "javascript:alert('You selected tab 2. These tabs are only shown on the about page')"
        }
      ],
      "id": "1"
    }
  ],
  "active": true
}

A more complicated example is to click an element when it exists, otherwise load a new URL.

/* Option 1 - Visual Editor */
javascript:if (typeof jQuery === 'undefined' || jQuery('#linkElement').length == 0) 
    window.location = 'http://example.com/target'; 
else
    jQuery('#linkElement').click();

/* Option 2 - JSON */
{
  "tabSelectionConfig": [
    {
      "id": "1",
      "regex": ".*"
    }
  ],
  "tabMenus": [
    {
      "items": [
        {
          "subLinks": [],
          "icon": "fa-home",
          "label": "Home",
          "url": "javascript:if (typeof jQuery === 'undefined' || jQuery('#linkElement').length == 0) window.location = 'http://example.com/target'; else jQuery('#linkElement').click();"
        },
        {
          "subLinks": [],
          "icon": "fa-search",
          "label": "Search",
          "url": "javascript:alert('You selected tab 2. These tabs are only shown on the about page')"
        }
      ],
      "id": "1"
    }
  ],
  "active": true
}

Bottom Tab Bar Visual Editor

📘

Trigger JavaScript Commands from Tab Menu Options

Learn more