Skip to content

Instantly share code, notes, and snippets.

@oksushi
Forked from dominikwilkowski/navigation.liquid
Last active August 29, 2015 14:16
Show Gist options
  • Save oksushi/651dcd7991401c231d7b to your computer and use it in GitHub Desktop.
Save oksushi/651dcd7991401c231d7b to your computer and use it in GitHub Desktop.
{% comment %}
This snippet spits out the HTML navigation derived from the front matter settings in your markdown files.
https://gist.github.com/dominikwilkowski/c7d916c9b36e4eebbc90
Usage:
{% include navigation.liquid %}
Return:
HTML direct output
Required:
Front matter needs these elements:
---
weight: "1.3.2"
---
{% endcomment %}
{% assign pages = site.pages | sort:"weight" %}
{% assign levels = 0 %}
<nav class="navigation-wrapper">
<ul class="navigation">
{% for thisPage in pages %}
{% comment %}
GETTING CURRENT LEVEL
{% endcomment %}
{% assign thisLevels = thisPage.weight | split: "." %}
{% assign thisLevels = thisLevels.size %}
{% comment %}
SAME LEVEL
{% endcomment %}
{% if level == thisLevels %}
</li>
{% endif %}
{% comment %}
NEXT HIGHER LEVEL
{% endcomment %}
{% if level < thisLevels %}
<ul class="navigation-subnav">
{% endif %}
{% comment %}
NEXT LOWER LEVEL
{% endcomment %}
{% if level > thisLevels %}
</li>
</ul>
{% endif %}
{% comment %}
OUTPUT THE LINK
{% endcomment %}
<li class="navigation-item">
<a class="navigation-link{% if page.url == thisPage.url %} is-active{% endif %}" href="{{ thisPage.url }}">
{{ thisPage.title }}
</a>
{% comment %}
ASSIGNING CURRENT LEVEL
{% endcomment %}
{% assign level = thisLevels %}
{% endfor %}
</li>
</ul>
</nav>
layout weight
default
1

Page 1

layout weight
default
2

Page 2

layout weight
default
3

Page 3

layout weight
default
2.1

Subpage 1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment