cd /news/developer-tools/highlighting-the-active-menu-item-in… · home topics developer-tools article
[ARTICLE · art-10990] src=alexselimov.com pub= topic=developer-tools verified=true sentiment=· neutral

Highlighting the active menu item in Hugo

The article explains how to highlight the active menu item in a Hugo website by ensuring menu URLs end with a trailing slash. The author describes creating a custom theme with a navbar defined in `hugo.toml` and looping over menu entries in a header partial. Adding a trailing slash to menu URLs is crucial for correct highlighting, as Hugo automatically appends one to page URLs.

read1 min views7 publishedJul 4, 2023

I’ve recently been developing sites for some family/friends. I had one person request highlighting the currently selected menu item. I had built a custom theme which used a navbear defined in the site wide hugo.toml . There were a few different solutions but I wanted to highlight the solution I ended up using for my use case. A dummy of my site directory set up is: content

|-- section1
|--_index.md
|--section1Post.md
|-- section2
|--_index.md
|--section2Post.md
|-- section3
|--_index.md

In my header partial I created a menu by looping over the entries in [[menu.main]] defined in the hugo.toml . It’s important here to end the url with a / . Hugo adds an ending / , to the urls of the pages that it creates. While this might not be necessary to make the hyperlink work, it will be necessary to get the highlighting correct. The definition of the menu looks like:

── more in #developer-tools 4 stories · sorted by recency
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/highlighting-the-act…] indexed:0 read:1min 2023-07-04 ·