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:

<ul class="navigation" style="clear:both;">
  {% for link in site.navigation %}
    {% assign url = page.url|remove:'index.html' %}
    {% assign hasFirst = link.first-level != undefined %}          
    <li 
        {% if hasFirst %} class="nested" {% endif%} {% if url == link.url %} class="current"{% endif %}>
        {% if hasFirst %} 
            <ul class="first-level">
                {% for firstlevel in link.first-level %}  
                    <li {% if url == firstlevel.url %} class="current" {% endif %} >
                        {% assign hasSecond = firstlevel.second-level != undefined %}
                        {% if hasSecond %} 
                            <ul class="second-level">
                                {% for secondlevel in firstlevel.second-level %}
                                    <li>
                                        <a href="{{ secondlevel.url }}">{{ secondlevel.text }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        <a {% if firstlevel.target != undefined %} target="{{firstlevel.target}}" {% endif %} href="{{ firstlevel.url }}">{{ firstlevel.text }}{% if hasSecond %} <i class='icon-right-dir-2'></i>{% endif %}</a>
                    </li>
                {% endfor %}
            </ul>                   
        {% endif %}
        <a href="{{link.url}}" class="{{link.icon}}">{{link.root}} {% if hasFirst %} <i class='icon-down-dir-2'></i>{% endif %}</a>
    </li>
  {% endfor %}
</ul>

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!