Skip to content

Instantly share code, notes, and snippets.

@at2ae
at2ae / Jekyll Static Highlighting Navigation Menu.md
Created May 26, 2020 19:15 — forked from pdarragh/Jekyll Static Highlighting Navigation Menu.md
Jekyll navigation bar with automatic highlighting.

Jekyll NavBar

In building a site powered by Jekyll and hosted by GitHub, I wanted the ability to highlight the current page's tab in the bar. I also wanted the bar to support second-level items (i.e. a dropdown), which proved somewhat tricky. This is the solution I arrived at after a few hours of fiddling around.

Construction

The contents of the navigation bar are contained in a data file located at _data/navigation.yml. This makes it accessible via the site-wide Liquid element {{ site.data.navigation}}. You can see the file for the formatting I used.

How it Works