Top Nav Bar Demo App

iOS

Android

/* Dynamic Title Configuration */
[
  {
    "regex": "https://median.dev/advanced-navigation/index.html",
    "title": "Home"
  },
  {
    "regex": "https://median.dev/advanced-navigation/contact.html",
    "title": "Contact Us"
  },
  {
    "regex": "https://median.dev/advanced-navigation/about.html",
    "title": "About"
  }
]
/* Set Dynamic Title */
median.navigationTitles.set({
  active: true,
  titles: [{
    title: 'Example Title #1',
    regex: 'https://median.dev/advanced-navigation/index.html'
  },
  { title: 'Example Title #2',
    regex: 'https://median.dev/advanced-navigation/contact.html'
  },
  { title: 'Example Title #3',
    regex: 'https://median.dev/advanced-navigation/about.html'
  }],
  persist: true
});
/* Set Current Page Title */
if (navigator.userAgent.indexOf('median') > -1) {
  median.navigationTitles.setCurrent({
    title: 'Hello World'
  });
}
/* Revert Dynamic Titles */
if (navigator.userAgent.indexOf('median') > -1) {
  median.navigationTitles.set({
    persist: true
  });
}
/* Custom Icon Configuration */
"navigation": {
    "actionConfig": {
      "actionSelection": [{
        "id": "cartAction",
        "regex": ".*"
      }],
      "actions": [{
        "items": [{
          "url": "javascript:alert('shopping cart clicked');",
          "icon": "fas fa-shopping-cart",
          "label": "Shopping Cart"
        }],
        "id": "cartAction"
      }],
      "active": true
    }
}