{"slug": "highlighting-the-active-menu-item-in-hugo", "title": "Highlighting the active menu item in Hugo", "summary": "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.", "body_md": "I’ve recently been developing sites for some family/friends.\nI had one person request highlighting the currently selected menu item.\nI had built a custom theme which used a navbear defined in the site wide hugo.toml\n.\nThere were a few different solutions but I wanted to highlight the solution I ended up using for my use case.\nA dummy of my site directory set up is:\ncontent\n|-- section1\n|--_index.md\n|--section1Post.md\n|-- section2\n|--_index.md\n|--section2Post.md\n|-- section3\n|--_index.md\nIn my header partial I created a menu by looping over the entries in [[menu.main]]\ndefined in the hugo.toml\n.\nIt’s important here to end the url\nwith a /\n.\nHugo adds an ending /\n, to the urls of the pages that it creates.\nWhile this might not be necessary to make the hyperlink work, it will be necessary to get the highlighting correct.\nThe definition of the menu looks like:", "url": "https://wpnews.pro/news/highlighting-the-active-menu-item-in-hugo", "canonical_source": "https://www.alexselimov.com/posts/highlighedmenu/", "published_at": "2023-07-04 02:19:00+00:00", "updated_at": "2026-05-23 08:37:55.473400+00:00", "lang": "en", "topics": ["developer-tools", "open-source"], "entities": ["Hugo"], "alternates": {"html": "https://wpnews.pro/news/highlighting-the-active-menu-item-in-hugo", "markdown": "https://wpnews.pro/news/highlighting-the-active-menu-item-in-hugo.md", "text": "https://wpnews.pro/news/highlighting-the-active-menu-item-in-hugo.txt", "jsonld": "https://wpnews.pro/news/highlighting-the-active-menu-item-in-hugo.jsonld"}}