Creating navigation in Jekyll

Photo by Aaron Burden on Unsplash

In your _data folder add a new navigation (navigation.yml) file:

- title: "Home"
href: "/"
- title: "About"
href: "/about/"
- title: "Projects"
subcategories:
- subtitle: "Project1"
subhref: "#"
- subtitle: "Project2"
subhref: "#"

In your _includes folder add a new navigation (navigation.html) file:

<nav>
<ul>
{% for nav in site.data.nav %}
{% if nav.subcategories != null %}
<li>
<a href="{{ site.url }}{{ nav.url }}">{{ nav.title }} ▼</a>
<ul>
{% for subcategory in nav.subcategories %}
<li><a href="{{ site.url }}{{ subcategory.subhref }}">{{ subcategory.subtitle }}</a></li>
{% endfor %}
</ul>
</li>
{% elsif nav.title == page.title %}
<li class="active">
<a href="{{ nav.url }}">{{ nav.title }}</a>
</li>
{% else %}
<li>
<a href="{{ site.url }}{{ nav.href }}">{{ nav.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>

Originally published at www.ronaldsvilcins.com on January 3, 2017.

--

--

--

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉 https://www.ronaldsvilcins.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Speed up Photoshop

Observer Pattern-What It Is and How To Use It

Extending the Swift’s Result type

How to migrate a git repository from gitlab self-hosted to gitlab.com

Kubernetes The H̶a̶r̶d̶ Raspberry PI Way (en-US)

KICK-STARTING YOUR NEW DEVELOPER JOB WITH THESE ESSENTIAL TIPS

Top 4 Core Values Of a DevOps Team

I even worked one summer during high school cleaning colonoscopes.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ronalds Vilcins

Ronalds Vilcins

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉 https://www.ronaldsvilcins.com/

More from Medium

Understanding CSS Specificity

Building UI using JavaScript Classes

Web development project to practice Dom manipulation in JavaScript

Create a form in your HTML document and a heading.

7 Boss CSS Deceives and Tips Each Engineer Ought to Be aware