How to Create a Custom Sidebar Menu in Jekyll

Creating a custom sidebar menu in Jekyll can enhance your website's navigation and improve user experience. Jekyll, a static site generator, allows you to customize your site's layout and menus with some basic knowledge of HTML, Liquid, and YAML.

Understanding Jekyll's Structure

Before creating a custom menu, it's important to understand Jekyll's folder structure. Your site typically includes folders like _layouts, _includes, and _data. These folders help organize your site's components and data, making customization easier.

Steps to Create a Custom Sidebar Menu

Follow these steps to add a sidebar menu to your Jekyll site:

Create a data file for menu items.
Design the sidebar layout in a layout or include file.
Insert the menu into your pages or posts.

Step 1: Define Your Menu Items

Create a YAML file in the _data folder called menu.yml. This file will list your menu items:

- title: Home
  url: /
- title: About
  url: /about/
- title: Blog
  url: /blog/
- title: Contact
  url: /contact/

Step 2: Build the Sidebar Include

In the _includes folder, create a file named sidebar-menu.html. Use Liquid to loop through your menu data:

<nav class="sidebar-menu">
  <ul>
    {% for item in site.data.menu %}
      <li><a href="{{ item.url }}">{{ item.title }}</a></li>
    {% endfor %}
  </ul>
</nav>

Step 3: Include the Sidebar in Layouts

Insert the include into your layout files, typically default.html or other layout files:

<body>
  <!-- Your header, content, etc. -->
  <aside>{% include sidebar-menu.html %}</aside>
  <main>{{ content }}</main>
</body>

Styling Your Sidebar Menu

Use CSS to style your sidebar menu for better appearance and responsiveness. For example:

.sidebar-menu {
  background-color: #f4f4f4;
  padding: 15px;
}
.sidebar-menu ul {
  list-style: none;
  padding: 0;
}
.sidebar-menu li {
  margin-bottom: 10px;
}
.sidebar-menu a {
  text-decoration: none;
  color: #333;
}
.sidebar-menu a:hover {
  color: #007acc;
}

Include this CSS in your stylesheet or within a <style> tag in your layout.

Conclusion

By following these steps, you can create a custom sidebar menu in Jekyll that improves navigation and user engagement. Customize your menu items and styles to match your site's design and needs.