How to build a menu dynamically - using nested content

Share
1

Hi Jekyll builders. I want to share a solution around menus and hope that others can learn or use this approach.

My problem was how to add a page to a nested folder structure and have it automatically added to a navigation menu.

And to only show files and folders at the current level - without having to have a huge sidebar or navbar that covers the whole site.

Nested Jekyll Menus

I solved this with a proof of concept repo - it has a demo site on GH Pages (jekyll 3 and no extra plugins) and the docs have an explanation of steps to apply to your own site.

Cheatsheets repo

And then I applied it to my Dev Cheatsheets repo. A site with over 100 pages, nested in folders up to about four levels deep.

Styling

The approach I made uses breadcrumbs to help the user with navigation. And the templating is flexible so you can render the menu how you like, once you have the repo structured correctly with minimal index.md pages at each level

The interface is neater for the cheatsheets repo - using flexbox and not just bullet points. I am thinking of other ways to add content to a sidebar or layout the menu in two columns instead of sections then pages. Any ideas would be appreciated.

2
3

Thanks for sharing. Is there something specific about the ReadTheDocs theme that is useful?

My understanding is that the sidebar is fixed (aside from the inner accordions). So it would be different for every page.

And the sidebar only goes up to 2 levels deep (I think). And my use-case is for about 4 levels. It can’t display the level of detail I need.

I am thinking of using a dynamic sidebar for my design - inspired by styling on ReadTheDocs or DocsifyJS

4

Update:

The nested jekyll project was a proof of concept / demo. I’ve developed further and made a theme to support my nested content, plus SVG logos.

And I use it here: