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 %} {% endif %}</a>
 </li>
 {% endfor %}
 </ul> 
 {% endif %}
 <a href="{{link.url}}" class="{{link.icon}}">{{link.root}} {% if hasFirst %} {% 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! 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 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: _config.yml 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 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 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 %} {% endif %}</a>
 </li>
 {% endfor %}
 </ul> 
 {% endif %}
 <a href="{{link.url}}" class="{{link.icon}}">{{link.root}} {% if hasFirst %} {% endif %}</a>
 </li>
 {% endfor %}
</ul> <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 %} {% endif %}</a>
 </li>
 {% endfor %}
 </ul> 
 {% endif %}
 <a href="{{link.url}}" class="{{link.icon}}">{{link.root}} {% if hasFirst %} {% 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. _config.yml Step 3: Style the Navigation With CSS 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;
} .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 How It Works Dynamic Menu Rendering: The Liquid code dynamically generates the navigation based on the configuration in _config.yml. Dynamic Menu Rendering: The Liquid code dynamically generates the navigation based on the configuration in _config.yml . Dynamic Menu Rendering: _config.yml Page Awareness: The current page is automatically detected, and the corresponding menu item is highlighted. Page Awareness: The current page is automatically detected, and the corresponding menu item is highlighted. Page Awareness: Styling Flexibility: You can customize the look and feel by adjusting the CSS. Styling Flexibility: You can customize the look and feel by adjusting the CSS. Styling Flexibility: Final Thoughts 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!

This story contains new, firsthand information uncovered by the writer.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Create a Dynamic Yelp-Inspired Loader Animation with HTML and CSS

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

How to Create a Dynamic Yelp-Inspired Loader Animation with HTML and CSS

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps