How to handle navigation menus in Jekyll in Shopify

Drive 20-40% of your revenue with Avada

Get Started

You have your own website such as blog or web page and you use a static format namely Jekyll. Jekyll sites usually creates a lot of pages for your web, therefore in order to have a better management for your page, you need to create the navigation. Normally, website is coded hard-coded links and soft-coded links. Instead of using hard-coding links, you can programmatically take back a lot of pages to install navigation for your site. However, another method that code developers can use is creating data file, in other words, advanced navigation. Under this method, items are stored and controlled in a central file. Besides, it is beneficial for larger sites than using simple navigation. This article would introduce you the first way to navigate your pages by using YAML data source.

Table of content

• Navigation Overview
• Instruction
• Usage
• Extending

Navigation Overview

Using data files is used for establishing more forceful navigation on Jekyll site. There are two main ways of storing pages on a Jekyll site. The first way is to retrieve pages listed in YAML data source. Gather the page data in a YAML (or JSON or CSV) file by creating the data folder. Then you approach YAML properties and fill in the theme with your value. Second, navigate pages by looping through the page front matter. In this method, code developers find out certain properties by looking through the front pages then return pages and insert the front values into web’s theme.

Instruction

First of all, you need to create a YML file with the name _data/navigation.yml.

After that, you open the file that you have just created and insert two key information which is a link and a name:

- link: /
  name: Home
- link: /about/
  name: About
- link: /services
  name: Services
- link: /contact/
  name: Contact

The third step is to generate _includes/navigation.html whose aim serves for performing the navigation data file. Besides, this file allows you to output the links and set class=”active” if it is running the current page.

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if item.link == page.url %}class="active"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

Usage

If you want to highlight the navigation for your layout, you can include the code:

{% include navigation.html %}

Extending

Extending is applied with a view to matching with your situation. In case you want to mark particular links with a red font, the meta data can be added to _data/navigation.yml:

- link: /
  name: Home
- link: /about/
  name: About
  highlight: true
- link: /services
  name: Services
  highlight: true
- link: /contact/
  name: Contact

And to navigate the layout, you insert a code like this:

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if item.highlight %}style="border: 1px solid red;"{% endif %} {% if item.link == page.url %}class="active"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

Conclusion

To sum up, navigation menu definitely helps to manage your site better as well as speed your page up. The advanced navigation works more effectively than the simple navigation which is suitable for small sites. Hope that advanced navigation in Jekyll would boost your website and increase your page’s conversion. Better website’s management means better experience for visitors.