[SOLVED] Adding a dedicated icon to each menu entry

I have a working menu nav which I would like to improve with adding a dedicated icon to each entry (per section).
My current code is as follows:

<ul class="nav-menu">
  {{ $currentPage := . }}
  {{ range .Site.Menus.main }}
  <a class="{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"
    href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
  {{ end }}

I put in the section front matter the dedicated icon as:

title: Projects
description: Lorem Ipsum
icon: pencil

I intend to put the following line in my customized menu:

{{ with .Params.icon }}<i class="icon-{{ .}}"></i>{{end }}

But the final menu doesn’t work and I get the error can’t evaluate field Params
Thanks for some help to likely correct the syntax.

I would suggest that you look into the Pre and Post attributes on the menu item.

1 Like

I’m using that technique here:

Hover over the top horizontal nav…:


…to see the result.

Thanks a lot.
It’s what I am looking for. I still have to look at the details to adapt to my menu, notably when using menu for lazy bloggers feature.

Sure. In the markdown frontmatter, you would just specify the menu with a .Pre or .Post. What you use it for is arbitrary, so you can put descriptive text, an icon name, a css class etc. E.g.: