jekyll-dynamic-menu
jekyll-dynamic-menu copied to clipboard
A Liquid snippet to generate markup for a dynamic navigation menu in Jekyll
Jekyll Dynamic Menu
A Liquid snippet to generate markup for a dynamic navigation menu in Jekyll
From this:
.
├── components/
| ├── Button.md
| ├── index.md
| ├── Heading.md
| └── Footer.md
├── global/
| ├── other/
| | ├── index.md
| | └── reset.md
| ├── Colours.md
| ├── index.md
| └── Utils.md
└── index.md
To this:
<ul data-menu-depth="0">
<li>
<a href="/components">Components</a>
<ul>
<li><a href="/components/button.html">Button</a></li>
<li><a href="/components/heading.html">Heading</a></li>
<li><a href="/components/footer.html">Footer</a></li>
</ul>
</li>
<li>
<a href="/global">Global</a>
<ul data-menu-depth="1">
<li><a href="/components/colours.html">Colours</a></li>
<li>
<a href="/components/other.html">Other</a>
<ul data-menu-depth="2">
<li><a href="/components/other/reset.html">Reset</a></li>
</ul>
</li>
<li><a href="/components/utils.html">Utils</a></li>
</ul>
</li>
How to use
-
Place
generateDynamicMenu.html
in your_ includes
folder. -
Make sure all the folders have an index file (e.g.
index.md
). If there is atitle
property in the front-matter, this will be used as the name of the level. -
To generate a menu using
/components
as the root directory, include the partial with:{% include generateDynamicMenu.html root="/components" %}
Parameters
Parameter | Description | Required |
---|---|---|
root |
Root directory. Any directories above it will not be included. | yes |
listClass |
Class(es) to be included in the <ul> elements |
no |
listItemClass |
Class(es) to be included in the <li> elements |
no |
linkClass |
Class(es) to be included in the <a> elements |
no |
activeClass |
Class(es) to be included in the <a> element that corresponds to the current active page |
no |
depthAttr |
Name of the data attribute to include in <ul> elements with information about depth (defaults to data-menu-depth |
no |