Highlighting active nav links. Closes #3. Closes #4.

mkdocs/mkdocs.py

@@ -18,6 +18,12 @@ suffix = '.html'
 index = 'index.html'
 
 
+class NavItem(object):
+    def __init__(self, title, url, children):
+        self.title, self.url, self.children = title, url, children
+        self.active = False
+
+
 def build_theme(config):
     for (source_dir, dirnames, filenames) in os.walk(config['theme_dir']):
         relative_path = os.path.relpath(source_dir, config['theme_dir'])
@@ -55,6 +61,7 @@ def build_html(config):
     template = jinja2.Template(open(template_path, 'r').read())
 
     for path, title in config['index']:
+        set_nav_active(path, config, nav)
         homepage_url = path_to_url('index.md', config)
         url = path_to_url(path, config)
         previous_url, next_url = path_to_previous_and_next_urls(path, config)
@@ -99,21 +106,41 @@ def build_html(config):
 
 
 def build_nav(config):
-    ret = collections.OrderedDict()
+    # TODO: Allow more than two levels of nav.
+    ret = []
     for path, title in config['index']:
         url = path_to_url(path, config)
-        title, sep, child = title.partition('/')
+        title, sep, child_title = title.partition('/')
         title = title.strip()
-        child = child.strip()
-        if not child:
-            ret[title] = url
-        elif title not in ret:
-            ret[title] = collections.OrderedDict({child: url})
+        child_title = child_title.strip()
+        if not child_title:
+            # New top level nav item
+            nav = NavItem(title=title, url=url, children=[])
+            ret.append(nav)
+        elif not ret or (ret[-1].title != title):
+            # New second level nav item
+            child = NavItem(title=child_title, url=url, children=[])
+            nav = NavItem(title=title, url=None, children=[child])
+            ret.append(nav)
         else:
-            ret[title][child] = url
+            # Additional second level nav item
+            child = NavItem(title=child_title, url=url, children=[])
+            ret[-1].children.append(child)
     return ret
 
 
+def set_nav_active(path, config, nav):
+    url = path_to_url(path, config)
+    for nav_item in nav:
+        nav_item.active = (nav_item.url == url)
+        for child in nav_item.children:
+            if child.url == url:
+                child.active = True
+                nav_item.active = True
+            else:
+                child.active = False
+
+
 def path_to_url(path, config):
     path = os.path.splitext(path)[0]
     url = path.replace(os.path.pathsep, '/')

theme/base.html

@@ -43,18 +43,18 @@
         <div class="navbar-collapse collapse">
           <!-- Navbar -->
           <ul class="nav navbar-nav">
-          {% for name, item in nav.items() %}
-            {% if item is mapping %}
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ name }} <b class="caret"></b></a>
+          {% for nav_item in nav %}
+            {% if nav_item.children %}
+              <li class="dropdown{% if nav_item.active %} active{% endif %}">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ nav_item.title }} <b class="caret"></b></a>
                 <ul class="dropdown-menu">
-                {% for name, url in item.items() %}
-                  <li><a href="{{ url }}">{{ name }}</a></li>
+                {% for nav_item in nav_item.children %}
+                  <li {% if nav_item.active %}class="active"{% endif %}><a href="{{ nav_item.url }}">{{ nav_item.title }}</a></li>
                 {% endfor %}
                 </ul>
               </li>
             {% else %}
-            <li class="active"><a href="{{ item }}">{{ name }}</a></li>
+            <li {% if nav_item.active %}class="active"{% endif %}><a href="{{ nav_item.url }}">{{ nav_item.title }}</a></li>
             {% endif %}
           {% endfor %}
           </ul>
@@ -150,11 +150,12 @@
       };
       if (location.hash) {shiftWindow();}
       window.addEventListener("hashchange", shiftWindow);
-      /*
-      This deals with clicks on nav links that do not change the current
-      anchor link, by forcing a 'hashchange' event to occur after the click.
-      */
+
       $("ul.nav a" ).click(function() {
+        /*
+        This deals with clicks on nav links that do not change the current
+        anchor link, by forcing a 'hashchange' event to occur after the click.
+        */
         var href = this.href;
         var suffix = location.hash;
         var matchesCurrentHash = (href.indexOf(suffix, href.length - suffix.length) !== -1);
@@ -164,6 +165,11 @@
           location.hash='';
         };
       });
+
+      /* Prevent disabled links from causing a page reload */
+      $("li.disabled a").click(function() {
+        event.preventDefault();
+      });
     </script>
   </body>
 </html>