Selecting the Navbar Menu

Bootstrap navbar can have an “active” element highlighted which ease navigation. In Octostrap3 it is possible to control which menu is selected on each page or post.

The Trick

We will use (again) a front-matter variable. If you check in source/_includes/custom/navigation.html the menu looks like this:

1
2
3
4
5
6
7
8
9
10

<!-- ... -->
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li {% if page.navbar == 'Blog' %}class="active"{% endif %}>
      <a href="{{ root_url }}/">Blog</a>
    </li>
    <li {% if page.navbar == 'Archives' %}class="active"{% endif %}>
      <a href="{{ root_url }}/blog/archives">Archives</a>
    </li>
<!-- ... -->

By default, page.navbar is ‘Blog’ for the blog index page and each posts. You can set it yourself easily in the front-matter (for pages or even posts if you want). This example is from the installation page:

1
2
3
4
5
6
7
8

---
layout: page
navbar: Setup
title: "Installation"
comments: true
sharing: true
footer: true
---

Enjoy !