Multilevel Navigation Using Jekyll: A Step-by-Step Guide

Creating a multilevel navigation in Jekyll might sound daunting, but it's easier than you think. In this guide, I'll show you how to set up a hierarchical menu structure using Jekyll and style it to match your site.

Step 1: Define the Navigation Structure in _config.yml

To begin, define a hierarchical structure for your navigation in the _config.yml file. Here’s an example:

navigation: - root: Root Menu Text url: /link.html icon: icon-you-want - root: Root Menu Text 1 url: # icon: icon-you-want-1 first-level: - text: First Level 1 url: first-level-link.html second-level: - text: Second Level url: second-level-link.html - text: First Level 2 url: first-level-2.html

This configuration creates a menu with multiple levels: a root level, a first level, and a second level.

Step 2: Add Liquid Template Code

To render the menu, use the following Liquid template in the HTML file where you want your navigation to appear:

{% for link in site.navigation %} {% assign url = page.url|remove:'index.html' %} {% assign hasFirst = link.first-level != undefined %}
• {% if hasFirst %}
  {% for firstlevel in link.first-level %}
  • {% assign hasSecond = firstlevel.second-level != undefined %} {% if hasSecond %}
    {% for secondlevel in firstlevel.second-level %}
    • {{ secondlevel.text }}
    {% endfor %}
    {% endif %} {{ firstlevel.text }}{% if hasSecond %} {% endif %}
  {% endfor %}
  {% endif %} {{link.root}} {% if hasFirst %} {% endif %}
{% endfor %}

This code dynamically generates the markup for your multilevel navigation based on the _config.yml file, ensuring that the correct menu item is highlighted for the current page.

Step 3: Style the Navigation With CSS .navigation { margin-bottom: 0; margin-left: 0; margin-top: 20px; list-style-type:none; } .navigation li { float: right; position: relative; list-style: none; } .navigation li a { color: #333; font-size: 12px; border-radius: 5px; padding: 8px 10px; display: block; font-weight: bold; text-transform: uppercase; white-space: nowrap; line-height:25px; } .navigation ul li a { border-radius: 0; padding: 5px 10px; margin:5px; font-weight: normal; text-transform: initial; } .navigation li > ul { background:white; position:absolute; list-style-type: none; top: 30px; margin: 0; padding: 0; border:2px solid #666; border-radius: 5px; left:0; display: none; min-width: 100%; } .navigation li:hover > ul { display: block; } .navigation li ul li { display: block; float: none; margin-left: 0; } .navigation li ul li a:hover { color: #444; background: #eeeeee; } .navigation > li a:hover, .navigation li.current > a { color: #86569A; font-weight: bold; } .navigation li a[href^=http]:after { font-family:"fontello"; content:'\e9c8'; margin-left: .3em; } .navigation .second-level { left: 100%; top: 0; }

This CSS ensures a clean and responsive design for your multilevel menu.

How It Works

• Dynamic Menu Rendering: The Liquid code dynamically generates the navigation based on the configuration in _config.yml.

\

• Page Awareness: The current page is automatically detected, and the corresponding menu item is highlighted.

\

• Styling Flexibility: You can customize the look and feel by adjusting the CSS.

Final Thoughts

Implementing multilevel navigation in Jekyll is a great way to enhance the user experience on your website. With the steps above, you can create a hierarchical menu that’s dynamic, stylish, and easy to manage.

\ Feel free to tweak the code and style to suit your project!