1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
---
title: Menu Templates
linktitle: Menu Templates
description: Menus are a powerful but simple feature for content management but can be easily manipulated in your templates to meet your design needs.
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-02-01
categories: [templates]
keywords: [lists,sections,menus]
menu:
docs:
title: "how to use menus in templates"
parent: "templates"
weight: 130
weight: 130
sections_weight: 130
draft: false
aliases: [/templates/menus/]
toc: false
---
Hugo makes no assumptions about how your rendered HTML will be
structured. Instead, it provides all of the functions you will need to be
able to build your menu however you want.
The following is an example:
{{< code file="layouts/partials/sidebar.html" download="sidebar.html" >}}
<!-- sidebar start -->
<aside>
<ul>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ if .HasChildren }}
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
<a href="#">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
<ul class="sub-menu">
{{ range .Children }}
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
{{ else }}
<li>
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
{{ end }}
<li>
<a href="#" target="_blank">Hardcoded Link 1</a>
</li>
<li>
<a href="#" target="_blank">Hardcoded Link 2</a>
</li>
</ul>
</aside>
{{< /code >}}
{{% note "`absLangURL` and `relLangURL`" %}}
Use the [`absLangURL`](/functions/abslangurl) or [`relLangURL`](/functions/rellangurl) functions if your theme makes use of the [multilingual feature](/content-management/multilingual/). In contrast to `absURL` and `relURL`, these two functions add the correct language prefix to the url.
{{% /note %}}
## Section Menu for Lazy Bloggers
To enable this menu, configure `sectionPagesMenu` in your site `config`:
```yml
sectionPagesMenu = "main"
```
The menu name can be anything, but take a note of what it is.
This will create a menu with all the sections as menu items and all the sections' pages as "shadow-members". Ensure that all first level directories that you would like to show up on this menu are [Branch Bundles](https://gohugo.io/content-management/sections/). Leaf Bundles do not form sections.
The _shadow_ implies that the pages isn't represented by a menu-item themselves, but this enables you to create a top-level menu like this:
```go-html-template
<nav class="sidebar-nav">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
{{ end }}
</nav>
```
In the above, the menu item is marked as active if on the current section's list page or on a page in that section.
## Site Config menus
The above is all that's needed. But if you want custom menu items, e.g. changing weight, name, or link title attribute, you can define them manually in the site config file:
{{< code-toggle file="config" >}}
[[menu.main]]
name = "This is the blog section"
title = "blog section"
weight = -110
identifier = "blog"
url = "/blog/"
{{</ code-toggle >}}
{{% note %}}
The `identifier` *must* match the section name.
{{% /note %}}
## Menu Entries from the Page's front matter
It's also possible to create menu entries from the page (i.e. the `.md`-file).
Here is a `yaml` example:
```yml
---
title: Menu Templates
linktitle: Menu Templates
menu:
docs:
title: "how to use menus in templates"
parent: "templates"
weight: 130
---
...
```
{{% note %}}
You can define more than one menu. It also doesn't have to be a complex value,
`menu` can also be a string, an array of strings, or an array of complex values
like in the example above.
{{% /note %}}
### Using .Page in Menus
If you use the front matter method of defining menu entries, you'll get access to the `.Page` variable.
This allows to use every variable that's reachable from the [page variable](/variables/page/).
This variable is only set when the menu entry is defined in the page's front matter.
Menu entries from the site config don't know anything about `.Page`.
That's why you have to use the go template's `with` keyword or something similar in your templating language.
Here's an example:
```go-html-template
<nav class="sidebar-nav">
{{ range .Site.Menus.main }}
<a href="{{ .URL }}" title="{{ .Title }}">
{{- .Name -}}
{{- with .Page -}}
<span class="date">
{{- dateFormat " (2006-01-02)" .Date -}}
</span>
{{- end -}}
</a>
{{ end }}
</nav>
```
## Using .Params in Menus
User-defined content on menu items are accessible via `.Params`.
Here's an example:
```go-html-template
<nav class="sidebar-nav">
{{ range .Site.Menus.main }}
<a href="{{ .URL }}" title="{{ .Title }}" class="{{ with .Params.class }}{{ . }}{{ end }}">
{{- .Name -}}
</a>
{{ end }}
</nav>
```
{{% note %}}
With Menu-level .Params they can easily exist on one menu item but not another. It's recommended to access them gracefully using the [with function](/functions/with).
{{% /note %}}
|
