I have a working menu nav which I would like to improve with adding a dedicated icon to each entry (per section).
<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 }}
</ul>
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
bep
October 6, 2018, 10:08am
2
I would suggest that you look into the Pre and Post attributes on the menu item.
1 Like
I’m using that technique here:
<div class="navbar-item is-hoverable{{ if .HasChildren }} has-dropdown{{ end }}">
<a class="navbar-link{{ if $currentPage.HasMenuCurrent "main" . }} is-active{{ end }}" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
{{ if .HasChildren -}}
<div class="navbar-dropdown is-boxed">
{{ $list := ( .Children ) }}
{{ $len := ( len $list ) }}
{{ range $index, $element := $list -}}
<a class="navbar-item{{ if $currentPage.IsMenuCurrent "main" . }} is-active{{ end }}" href="{{ .URL | absLangURL }}">
<span>
<span class="icon has-text-esolia-blue-0">
<i class="fas {{ .Pre }}"></i>
</span>
<strong>{{ .Name }}</strong>
<br>
<span class="has-padding-m">{{ .Post | safeHTML }}</span>
</span>
</a>
{{ if ne (add $index 1) $len }}
<hr class="navbar-divider">
{{ end }}
{{ end }}
Hover over the top horizontal nav…:
https://esolia.com/
…to see the result.
Thanks a lot.
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.:
https://raw.githubusercontent.com/RickCogley/eSolia_2018/master/content/page/about/index.en.md