9/26/2016 - 9:26 PM

Same Navigation on all Pages

Same Navigation on all Pages

# Then add the nav link array to your _config.yml file as following. Mind the right indentation, as YAML is pretty picky on that (Jekyll as well).

  - text: Home
    title: Back to home page
    url: /index.html
  - text: Intro
    title: An introduction to the project
    url: /intro.html
  - text: etc.
    title: ...
    url: /foo.html
After reading all that answers, I came up with a new and easier to maintain solution:

Add {% include nav.html %} to your _layouts/layout.html file
Add a nav.html file to your _includes folder

Add the following content to your nav.html file. It will determine if your link is on the current page and add a class of active as well as remove index.html from your link. It will also work with a subfolder like /repo-name, which is needed for GitHub gh-pages Pages branch.

  <ul class="nav">
    {% assign url = page.url|remove:'index.html' %}
    {% for link in site.navigation %}
      {% assign state = '' %}
      {% if page.url == link.url %}
        {% assign state = 'active ' %}
      {% endif %}
      <li class="{{ state }}nav-item">
          <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
    {% endfor %}