diff --git a/templates/main.css b/templates/main.css
index ebc36b4..e3dbf20 100644
--- a/templates/main.css
+++ b/templates/main.css
@@ -85,6 +85,10 @@ nav .file {
     opacity: .8;
 }
 
+nav .not-last {
+    opacity: .5;
+}
+
 footer {
     padding: 1em 0;
     color: gray;
diff --git a/templates/main.html b/templates/main.html
index ee7e540..9f572d6 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -25,9 +25,21 @@
             <h1><a href="/">{{garden_title}}</a></h1>
             <ul>
                 {% for file in files %}
-                <li class="{% if file is containing(".md") %}page{% else %}file{% endif %}">
-                    <a href="/{{file}}">{{file | trim_end_matches(pat=".md")}}</a>
-                </li>
+                    {% if file is containing(".md") %}
+                    <li class="page">
+                        <a href="/{{file}}">
+                            {% for component in file | trim_end_matches(pat=".md") | split(pat=".") %}
+                                {%- if not loop.last -%}
+                                    <span class="not-last">{{component}}.</span>
+                                {%- else -%}
+                                    <span>{{component}}</span>
+                                {%- endif -%}
+                            {% endfor %}
+                        </a>
+                    </li>
+                    {% else %}
+                        <li class="file"><a href="/{{file}}">{{file}}</a></li>
+                    {% endif %}
                 {% endfor %}
             </ul>
         </nav>