diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl
index efec83c155..1fb92b4b28 100644
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -1,95 +1,57 @@
 <?js
 var self = this;
+
 function toShortName(name) {
     return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
 }
+
+function getItemCssClass(type) {
+    if (type === 'module') {
+        return 'glyphicon-plus';
+    } else if (type === 'class') {
+        return 'glyphicon-chevron-right';
+    }
+    return '';
+}
+
+const printList = v => { ?>
+                <li data-name="<?js= v.longname ?>"><?js
+}
+const printListWithStability = v => {
+    const cls = v.stability && v.stability !== 'stable' ? ' class="unstable"' : ''; ?>
+                <li data-name="<?js= v.longname ?>"<?js= cls ?>><?js
+}
+
+function listContent(item, title, listItemPrinter) {
+    const type = title.toLowerCase();
+    if (item[type] && item[type].length) { ?>
+            <ul class="<?js= type ?> itemMembers">
+                <span class="subtitle"><?js= title ?></span><?js
+        item[type].forEach(function (v) {
+            listItemPrinter(v); ?><?js= self.linkto(v.longname, toShortName(v.name)) ?><?js
+        }); ?>
+            </ul><?js
+    }
+}
 ?>
 <div class="navigation">
     <div class="search">
         <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
     </div>
-    <ul class="list">
-    <?js
-        this.nav.forEach(function (item) {
-    ?>
+    <ul class="list"><?js
+        this.nav.forEach(function (item) { ?>
         <li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
             <span class="title">
-                <?js if (item.type === 'module') { ?>
-                    <span class="glyphicon glyphicon-plus toggle"></span>
-                <?js } else if (item.type === 'class') { ?>
-                    <span class="glyphicon glyphicon-chevron-right toggle"></span>
-                <?js } ?>
+                <span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
                 <?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)) { ?>
-                <?js } ?>
-            </span>
-            <ul class="members itemMembers">
-            <?js
-            if (item.members.length) {
-            ?>
-            <span class="subtitle">Members</span>
-            <?js
-                item.members.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, toShortName(v.name)) ?></li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="typedefs itemMembers">
-            <?js
-            if (item.typedefs.length) {
-            ?>
-            <span class="subtitle">Typedefs</span>
-            <?js
-                item.typedefs.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="methods itemMembers">
-            <?js
-            if (item.methods.length) {
-            ?>
-            <span class="subtitle">Methods</span>
-            <?js
-
-                item.methods.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="fires itemMembers">
-            <?js
-            if (item.fires && item.fires.length) {
-            ?>
-            <span class="subtitle">Fires</span>
-            <?js
-                item.fires.forEach(function (v) {
-                    v = self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]};
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability != 'stable') ? 'unstable' : '' ?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-        </li>
-    <?js }); ?>
+            </span><?js
+                listContent(item, 'Members', printList);
+                listContent(item, 'Typedefs', printListWithStability);
+                listContent(item, 'Methods', printListWithStability);
+                if (item.fires) {
+                    const fires = item.fires.map(v => self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]});
+                    listContent({fires: fires}, 'Fires', printListWithStability)
+                }
+        }); ?>
     </ul>
 </div>