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
|
---
title: Menus
linktitle: Menus
description: Hugo has a simple yet powerful menu system.
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-03-31
categories: [content management]
keywords: [menus]
draft: false
menu:
docs:
parent: "content-management"
weight: 120
weight: 120 #rem
aliases: [/extras/menus/]
toc: true
---
{{% note "Lazy Blogger"%}}
If all you want is a simple menu for your sections, see the ["Section Menu for Lazy Bloggers" in Menu Templates](/templates/menu-templates/#section-menu-for-lazy-bloggers).
{{% /note %}}
You can do this:
* Place content in one or many menus
* Handle nested menus with unlimited depth
* Create menu entries without being attached to any content
* Distinguish active element (and active branch)
## What is a Menu in Hugo?
A **menu** is a named array of menu entries accessible by name via the [`.Site.Menus` site variable][sitevars]. For example, you can access your site's `main` menu via `.Site.Menus.main`.
{{% note "Menus on Multilingual Sites" %}}
If you make use of the [multilingual feature](/content-management/multilingual/), you can define language-independent menus.
{{% /note %}}
A menu entry has the following properties (i.e., variables) available to it:
`.URL`
: string
`.Name`
: string
`.Menu`
: string
`.Identifier`
: string
`.Pre`
: template.HTML
`.Post`
: template.HTML
`.Weight`
: int
`.Parent`
: string
`.Children`
: Menu
Note that menus also have the following functions available as well:
`.HasChildren`
: boolean
Additionally, there are some relevant functions available to menus on a page:
`.IsMenuCurrent`
: (menu string, menuEntry *MenuEntry ) boolean
`.HasMenuCurrent`
: (menu string, menuEntry *MenuEntry) boolean
## Add content to menus
Hugo allows you to add content to a menu via the content's [front matter](/content-management/front-matter/).
### Simple
If all you need to do is add an entry to a menu, the simple form works well.
#### A Single Menu
```
---
menu: "main"
---
```
#### Multiple Menus
```
---
menu: ["main", "footer"]
---
```
#### Advanced
```
---
menu:
docs:
parent: 'extras'
weight: 20
---
```
## Add Non-content Entries to a Menu
You can also add entries to menus that aren’t attached to a piece of content. This takes place in your Hugo project's [`config` file][config].
Here’s an example snippet pulled from a `config.toml`:
{{< code file="config.toml" >}}
[[menu.main]]
name = "about hugo"
pre = "<i class='fa fa-heart'></i>"
weight = -110
identifier = "about"
url = "/about/"
[[menu.main]]
name = "getting started"
pre = "<i class='fa fa-road'></i>"
weight = -100
url = "/getting-started/"
{{< /code >}}
Here's the equivalent snippet in a `config.yaml`:
{{< code file="config.yml" >}}
menu:
main:
- name: "about hugo"
pre: "<i class='fa fa-heart'></i>"
weight: -110
identifier: "about"
url: "/about/"
- name: "getting started"
pre: "<i class='fa fa-road'></i>"
weight: -100
url: "/getting-started/"
{{< /code >}}
{{% note %}}
The URLs must be relative to the context root. If the `baseURL` is `https://example.com/mysite/`, then the URLs in the menu must not include the context root `mysite`. Using an absolute URL will overide the baseURL. If the value used for `URL` in the above example is `https://subdomain.example.com/`, the output will be `https://subdomain.example.com`.
{{% /note %}}
## Nesting
All nesting of content is done via the `parent` field.
The parent of an entry should be the identifier of another entry. The identifier should be unique (within a menu).
The following order is used to determine an Identifier:
`.Name > .LinkTitle > .Title`
This means that `.Title` will be used unless `.LinkTitle` is present, etc. In practice, `.Name` and `.Identifier` are only used to structure relationships and therefore never displayed.
In this example, the top level of the menu is defined in your [site `config` file][config]). All content entries are attached to one of these entries via the `.Parent` field.
## Render Menus
See [Menu Templates](/templates/menu-templates/) for information on how to render your site menus within your templates.
[config]: /getting-started/configuration/
[multilingual]: /content-management/multilingual/
[sitevars]: /variables/
|
