Auto-collapsing menu

Introduction

A lot of websites use auto-collapsing menu’s with nested pages. They are a great way to show a lot of content in a structured way, but it requires a hierarchical view of all your pages. This is a nested menu that can be added through a simple include. If you want to see this in action, you can view a demo.

How it works

This script reads the folders in your section and automatically creates an auto-collapsing nested menu. Note that you are NOT allowed to use an ‘index.md’ file in your folders. You DO, however, need an _index.md in a folder that contains other pages. Please look at the directory structure of the demo for a clarification.

Installation

Step 1. Download the file nested-menu.html and the file nested-menu-partial.html
Step 2. Save the files in the ‘layouts/partials’ directory of your project
Step 3. Add the following line to your layout on the place where you want the nested menu to appear:

{{ partial "nested-menu.html" . }}