diff --git a/docs/_layouts/api_index_template.j2 b/docs/_layouts/api_index_template.j2
index 271be252..087fbced 100644
--- a/docs/_layouts/api_index_template.j2
+++ b/docs/_layouts/api_index_template.j2
@@ -1,29 +1,41 @@
-[%- macro dump_interfaces(interfaces) %]
+[%- macro dump_interfaces(interfaces, level) %]
 [%- for intf in interfaces %]
 [%- if intf.interfaces or intf.value_types %]
 <li>
 {% assign myvar = (page.title + '.') | split: "[[intf.fullname + '.']]" %}
   <input id="chk-[[intf.fullname]]" type="checkbox" {% if myvar[0] == "" %}checked{% endif %} hidden />
-  <p class="navitem{% if page.title == "[[intf.fullname]]" %} currentitem{% endif %}"><label for="chk-[[intf.fullname]]" class="chevron"></label><a href="{{site.baseurl}}/api/[[intf.fullname | lower]]">[[intf.name]]</a></p>
+  <p class="navitem{% if page.title == "[[intf.fullname]]" %} currentitem{% endif %}">
+    [% for i in range(level) %]<a class="levelbar">&nbsp;</a>[% endfor %]
+    <label style="margin-left: [[level*0]]px;" for="chk-[[intf.fullname]]" class="chevron"></label>
+    <a href="{{site.baseurl}}/api/[[intf.fullname | lower]]">[[intf.name]]</a>
+  </p>
   <ul class="expandable-list">
-[[dump_interfaces(intf.interfaces) | indent(4)]]
-[[dump_value_types(intf.enums) | indent(4)]]
+[[dump_interfaces(intf.interfaces, level + 1) | indent(4)]]
+[[dump_value_types(intf.enums, level + 1) | indent(4)]]
   </ul>
 </li>
 [%- else %]
 <li>
-  <p style="padding-left: 27px;" class="navitem{% if page.title == "[[intf.fullname]]" %} currentitem{% endif %}"><a href="{{site.baseurl}}/api/[[intf.fullname | lower]]">[[intf.name]]</a></p>
+  <p class="navitem{% if page.title == "[[intf.fullname]]" %} currentitem{% endif %}">
+    [% for i in range(level) %]<a class="levelbar">&nbsp;</a>[% endfor %]
+    <span style="margin-left: 7px; margin-right: 10px; float: inline-start;">&bull;</span>
+    <a href="{{site.baseurl}}/api/[[intf.fullname | lower]]">[[intf.name]]</a>
+  </p>
 </li>
 [%- endif %]
 [%- endfor %]
 [%- endmacro %]
 
-[%- macro dump_value_types(value_types) %]
+[%- macro dump_value_types(value_types, level) %]
 [%- for enum in value_types %]
 <li>
-  <p style="padding-left: 27px;" class="navitem{% if page.title == "[[enum.fullname]]" %} currentitem{% endif %}"><a href="{{site.baseurl}}/api/[[enum.fullname | lower]]">[[enum.name]]</a></p>
+  <p class="navitem{% if page.title == "[[enum.fullname]]" %} currentitem{% endif %}">
+    [% for i in range(level) %]<a class="levelbar">&nbsp;</a>[% endfor %]
+    <span style="margin-left: 7px; margin-right: 10px; float: inline-start;">&bull;</span>
+    <a href="{{site.baseurl}}/api/[[enum.fullname | lower]]">[[enum.name]]</a>
+  </p>
 </li>
 [%- endfor %]
 [%- endmacro %]
 
-[[dump_interfaces(toplevel_interfaces)]]
+[[dump_interfaces(toplevel_interfaces, 0)]]
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 2c60c3c5..dbccc0fd 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -300,7 +300,7 @@ header li {
 }
 
 .navgroup {
-  background: #9c9c9c;
+  background: #cbcbcb;
   margin-top: 20px;
 }
 .navgroup:first-child {
@@ -308,7 +308,7 @@ header li {
 }
 
 #navbar ul {
-  background-color: #ffffffa6;
+  background-color: #ffffffd9;
   margin: 0;
 }
 
@@ -336,6 +336,13 @@ header li {
 
 .navitem a { display: block; }
 
+.levelbar {
+  float: inline-start;
+  margin-left: 8px;
+  margin-right: 5px;
+  border-left: 1px solid #0000004d;
+}
+
 .currentitem {
   //-webkit-box-shadow: inset 0px 0px 5px 3px #aa0000a6;
   //-moz-box-shadow: inset 0px 0px 5px 3px #aa0000a6;