diff --git a/config/jsdoc/api/template/publish.js b/config/jsdoc/api/template/publish.js
index cbed1b4997..a81eb8c4c0 100644
--- a/config/jsdoc/api/template/publish.js
+++ b/config/jsdoc/api/template/publish.js
@@ -215,39 +215,39 @@ function buildNav(members) {
     return 0;
   });
 
-  function createEntry(type, v) {
-    return {
-      type: type,
-      longname: v.longname,
-      name: v.name,
-      classes: find({
-        kind: 'class',
-        memberof: v.longname
-      }).map(createEntry.bind(this, 'class')),
-      members: find({
-        kind: 'member',
-        memberof: v.longname
-      }),
-      methods: find({
-        kind: 'function',
-        memberof: v.longname
-      }),
-      typedefs: find({
-        kind: 'typedef',
-        memberof: v.longname
-      }),
-      events: find({
-        kind: 'event',
-        memberof: v.longname
-      })
-    };
-  }
   _.each(merged, function(v) {
     // exclude interfaces from sidebar
-    if (v.interface !== true) {
-      if (v.kind == 'module') {
-        nav.push(createEntry('module', v));
-      }
+    if (v.interface !== true && v.kind === 'class') {
+      nav.push({
+        type: 'class',
+        longname: v.longname,
+        prettyname: v.longname
+          .substring(0, v.longname.indexOf('~'))
+          .replace('module:', '')
+          .replace('ol/', ''),
+        name: v.name,
+        module: find({
+          kind: 'module',
+          longname: v.memberof
+        })[0],
+        members: find({
+          kind: 'member',
+          memberof: v.longname
+        }),
+        methods: find({
+          kind: 'function',
+          memberof: v.longname
+        }),
+        typedefs: find({
+          kind: 'typedef',
+          memberof: v.longname
+        }),
+        fires: v.fires,
+        events: find({
+          kind: 'event',
+          memberof: v.longname
+        })
+      });
     }
   });
   return nav;
diff --git a/config/jsdoc/api/template/static/scripts/main.js b/config/jsdoc/api/template/static/scripts/main.js
index f1fcf5d560..dbc21b54ce 100644
--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -1,121 +1,158 @@
 $(function () {
-    // Search Items
-    $('#search').on('keyup', function (e) {
-        var value = $(this).val();
-        var $el = $('.navigation');
+  // Search Items
+  $('#include_modules').change(function (e) {
+    console.log('change');
+    if ($(this).is(':checked')) {
 
-        if (value) {
-            var regexp = new RegExp(value, 'i');
-            $el.find('li, .itemMembers').hide();
+    } else {
 
-            $el.find('li').each(function (i, v) {
-                var $item = $(v);
+    }
+  });
 
-                if ($item.data('name') && regexp.test($item.data('name'))) {
-                    const container = $item.parent().parent().parent();
-                    container.show();
-                    container.closest('.itemMembers').show();
-                    container.closest('.item').show();
-                    $item.show();
-                    $item.closest('.itemMembers').show();
-                    $item.closest('.item').show();
-                }
-            });
-        } else {
-            $el.find('.item, .itemMembers').hide();
-            $('.navigation>ul>li').show();
+  var getSearchWeight = function (searchTerm, $matchedItem) {
+    let weight = 0;
+    // We could get smarter on the weight here
+    if ($matchedItem.data('shortname')
+      && $matchedItem.data('shortname').toLowerCase() === searchTerm.toLowerCase()) {
+      weight++;
+    }
+    return weight;
+  };
+
+  // sort function callback
+  var weightSorter = function (a, b) {
+    var aW = $(a).data('weight') || 0;
+    var bW = $(b).data('weight') || 0;
+    return bW - aW;
+  };
+
+  // Search Items
+  $('#search').on('keyup', function (e) {
+    var value = $(this).val();
+    var $el = $('.navigation');
+
+    if (value && value.length > 1) {
+      var regexp = new RegExp(value, 'i');
+      $el.find('li, .itemMembers').hide();
+
+      $el.find('li').each(function (i, v) {
+        const $item = $(v);
+        const name = $item.data('name');
+
+        if (name && regexp.test(name)) {
+          const $classEntry = $item.closest('.item');
+          const $members = $item.closest('.itemMembers');
+
+          // Do the weight thing
+          $classEntry.removeData('weight');
+          $classEntry.show();
+          const weight = getSearchWeight(value, $classEntry);
+          $classEntry.data('weight', weight);
+
+          $members.show();
+          $classEntry.show();
+          $item.show();
         }
+      });
 
-        $el.find('.list').scrollTop(0);
-    });
+      $(".navigation ul.list li.item:visible")
+        .sort(weightSorter) // sort elements
+        .appendTo(".navigation ul.list"); // append again to the list
 
-    // Toggle when click an item element
-    $('.navigation').on('click', '.title', function (e) {
-        $(this).parent().find('.itemMembers').toggle();
-    });
-
-    // Show an item related a current documentation automatically
-    var filename = $('.page-title').data('filename')
-        .replace(/\.[a-z]+$/, '')
-        .replace('module-', 'module:')
-        .replace(/_/g, '/')
-        .replace(/-/g, '~');
-    var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
-
-    if ($currentItem.length) {
-        $currentItem
-            .remove()
-            .prependTo('.navigation .list')
-            .show()
-            .find('.itemMembers')
-                .show();
+    } else {
+      $el.find('.item, .itemMembers').show();
     }
 
-    // Auto resizing on navigation
-    var _onResize = function () {
-        var height = $(window).height();
-        var $el = $('.navigation');
+    $el.find('.list').scrollTop(0);
+  });
 
-        $el.height(height).find('.list').height(height - 133);
-    };
+  // Toggle when click an item element
+  $('.navigation').on('click', '.title', function (e) {
+    $(this).parent().find('.itemMembers').toggle();
+  });
 
-    $(window).on('resize', _onResize);
-    _onResize();
+  // Show an item related a current documentation automatically
+  var filename = $('.page-title').data('filename')
+    .replace(/\.[a-z]+$/, '')
+    .replace('module-', 'module:')
+    .replace(/_/g, '/')
+    .replace(/-/g, '~');
+  var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
 
-    var currentVersion = document.getElementById('package-version').innerHTML;
+  if ($currentItem.length) {
+    $currentItem
+      .remove()
+      .prependTo('.navigation .list')
+      .show()
+      .find('.itemMembers')
+      .show();
+  }
 
-    // warn about outdated version
-    var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
-    fetch(packageUrl).then(function(response) {
-      return response.json();
-    }).then(function(json) {
-      var latestVersion = json.version;
-      document.getElementById('latest-version').innerHTML = latestVersion;
-      var url = window.location.href;
-      var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
-      var cookieText = 'dismissed=-' + latestVersion + '-';
-      var dismissed = document.cookie.indexOf(cookieText) != -1;
-      if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
-        var link = url.replace(branchSearch[0], '/latest/apidoc/');
-        fetch(link, {method: 'head'}).then(function(response) {
-          var a = document.getElementById('latest-link');
-          a.href = response.status == 200 ? link : '../../latest/apidoc/';
-        });
-        var latestCheck = document.getElementById('latest-check');
-        latestCheck.style.display = '';
-        document.getElementById('latest-dismiss').onclick = function() {
-          latestCheck.style.display = 'none';
-          document.cookie = cookieText;
-        }
+  // Auto resizing on navigation
+  var _onResize = function () {
+    var height = $(window).height();
+    var $el = $('.navigation');
+
+    $el.height(height).find('.list').height(height - 133);
+  };
+
+  $(window).on('resize', _onResize);
+  _onResize();
+
+  var currentVersion = document.getElementById('package-version').innerHTML;
+
+  // warn about outdated version
+  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
+  fetch(packageUrl).then(function(response) {
+    return response.json();
+  }).then(function(json) {
+    var latestVersion = json.version;
+    document.getElementById('latest-version').innerHTML = latestVersion;
+    var url = window.location.href;
+    var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
+    var cookieText = 'dismissed=-' + latestVersion + '-';
+    var dismissed = document.cookie.indexOf(cookieText) != -1;
+    if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
+      var link = url.replace(branchSearch[0], '/latest/apidoc/');
+      fetch(link, {method: 'head'}).then(function(response) {
+        var a = document.getElementById('latest-link');
+        a.href = response.status == 200 ? link : '../../latest/apidoc/';
+      });
+      var latestCheck = document.getElementById('latest-check');
+      latestCheck.style.display = '';
+      document.getElementById('latest-dismiss').onclick = function() {
+        latestCheck.style.display = 'none';
+        document.cookie = cookieText;
       }
-    });
+    }
+  });
 
-    // create source code links to github
-    var srcLinks = $('div.tag-source');
-    srcLinks.each(function(i, el) {
-      var textParts = el.innerHTML.trim().split(', ');
-      var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
-          textParts[0];
-      el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
-          '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
-          textParts[1] + '</a>';
-    });
+  // create source code links to github
+  var srcLinks = $('div.tag-source');
+  srcLinks.each(function(i, el) {
+    var textParts = el.innerHTML.trim().split(', ');
+    var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
+      textParts[0];
+    el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
+      '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
+      textParts[1] + '</a>';
+  });
 
-    // Highlighting current anchor
+  // Highlighting current anchor
 
-    var anchors = $('.anchor');
-    var _onHashChange = function () {
-        var activeHash = window.document.location.hash
-            .replace(/\./g, '\\.') // Escape dot in element id
-            .replace(/\~/g, '\\~'); // Escape tilde in element id
+  var anchors = $('.anchor');
+  var _onHashChange = function () {
+    var activeHash = window.document.location.hash
+      .replace(/\./g, '\\.') // Escape dot in element id
+      .replace(/\~/g, '\\~'); // Escape tilde in element id
 
-        anchors.removeClass('highlighted');
+    anchors.removeClass('highlighted');
 
-        if (activeHash.length > 0) {
-            anchors.filter(activeHash).addClass('highlighted');
-        }
-    };
+    if (activeHash.length > 0) {
+      anchors.filter(activeHash).addClass('highlighted');
+    }
+  };
 
-    $(window).on('hashchange', _onHashChange);
-    _onHashChange();
+  $(window).on('hashchange', _onHashChange);
+  _onHashChange();
 });
diff --git a/config/jsdoc/api/template/static/styles/jaguar.css b/config/jsdoc/api/template/static/styles/jaguar.css
index 032c60d26d..2a105027ba 100644
--- a/config/jsdoc/api/template/static/styles/jaguar.css
+++ b/config/jsdoc/api/template/static/styles/jaguar.css
@@ -36,7 +36,7 @@
 .navbar-inverse .navbar-nav>li>a:hover,
 .navbar-inverse .navbar-nav>li>a:focus,
 .navbar-inverse .navbar-nav>li>a.active
- {
+{
   outline:0;
   color: #fff;
   background-color: #268591;
@@ -106,6 +106,15 @@ li {
 .navigation .applicationName a {
   color: #fff;
 }
+.navigation .include-modules {
+  color: #e1e1e1;
+  float: right;
+  font-size: 0.75em;
+  padding: 5px 15px;
+}
+.navigation .include-modules input {
+  vertical-align: text-bottom;
+}
 .navigation .search {
   padding: 10px 15px;
 }
@@ -125,6 +134,11 @@ li {
   padding-bottom: 8px;
   border-bottom: 1px solid #333;
 }
+
+.navigation li.perfect-match {
+  border: 5px solid orange;
+}
+
 .navigation li.item a {
   color: #bbb;
 }
@@ -158,6 +172,12 @@ li {
   color: #1F6B75;
   display: block;
 }
+.navigation li.item .modulelink {
+  position: relative;
+  font-size: 0.75em;
+  padding-left: 5px;
+  top: -5px;
+}
 .navigation li.item ul > li {
   font-size: 0.75em;
   padding-left: 8px;
@@ -165,6 +185,7 @@ li {
 }
 .navigation li.item .itemMembers {
   display: none;
+  padding-left: 8px;
 }
 .main {
   padding: 20px 20px;
diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl
index 2e18305f21..5c32c9f456 100644
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -1,7 +1,7 @@
 <?js
 var self = this;
 function toShortName(name) {
-  return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
+    return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
 }
 ?>
 <div class="navigation">
@@ -10,29 +10,21 @@ function toShortName(name) {
     </div>
     <ul class="list">
     <?js
-    let navbuilder;
-    this.nav.forEach(navbuilder = function (item) {
+        this.nav.forEach(function (item) {
     ?>
-        <li class="item" data-name="<?js= item.longname ?>">
+        <li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
+                <?js= self.linkto(item.longname, item.prettyname) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
-                         item.events.length > 0)) { ?>
+                            item.events.length > 0)) { ?>
                 <?js } ?>
             </span>
-            <ul class="members itemMembers">
-            <?js
-            if (item.classes.length) {
-            ?>
-            <span class="subtitle">Classes</span>
-            <?js
-                item.classes.forEach(function (v) {
-                    navbuilder(v);
-                });
-            }
-            ?>
-            </ul>
+            <?js if (item.module && item.module.longname) { ?>
+                <span class="modulelink">
+                  <?js= self.linkto(item.module.longname, '↳ module') ?>
+                </span>
+            <?js } ?>
             <ul class="members itemMembers">
             <?js
             if (item.members.length) {