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

Dart Aqueduct server for your Flutter app — Part 1: Getting started

Specflow DSL: A plugin to simplify BDD automation tests

4EVERLAND First Landing Event Officially Launched

MY DSC(Developers Student Club) EXPERIENCE

Weekly Report Suterusu 2021 Week 32 Summary

Decals in Unity 2020

The best Programming Languages to Learn in 2017

Why every Head of DevOps needs to know reverse debugging?

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

A Walkthrough for fetching API

Free hosting on GitHub with GitHub Pages!

Materialize Your Web Project! … Or Create The Framework OF Web Failure

INTRODUCTION TO HTML