Skip to content

Instantly share code, notes, and snippets.

View dan-carroll's full-sized avatar

Dan Carroll dan-carroll

View GitHub Profile
@pdarragh
pdarragh / Jekyll Static Highlighting Navigation Menu.md
Last active September 30, 2023 10:43
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