blob: 759f53ff3341ed350a9b68d9e93bc46d55c54d6e (
plain) (
blame)
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
|
---
title: Configure menus
linkTitle: Menus
description: Centrally define menu entries for one or more menus.
categories: []
keywords: []
---
> [!note]
> To understand Hugo's menu system, please refer to the [menus] page.
There are three ways to define menu entries:
1. [Automatically]
1. [In front matter]
1. In site configuration
This page covers the site configuration method.
## Example
To define entries for a "main" menu:
{{< code-toggle file=hugo >}}
[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10
[[menus.main]]
name = 'Products'
pageRef = '/products'
weight = 20
[[menus.main]]
name = 'Services'
pageRef = '/services'
weight = 30
{{< /code-toggle >}}
This creates a menu structure that you can access with [`Menus`] method on a `Site` object:
```go-html-template
{{ range .Site.Menus.main }}
...
{{ end }}
```
See [menu templates] for a detailed example.
To define entries for a "footer" menu:
{{< code-toggle file=hugo >}}
[[menus.footer]]
name = 'Terms'
pageRef = '/terms'
weight = 10
[[menus.footer]]
name = 'Privacy'
pageRef = '/privacy'
weight = 20
{{< /code-toggle >}}
Access this menu structure in the same way:
```go-html-template
{{ range .Site.Menus.footer }}
...
{{ end }}
```
## Properties
Menu entries usually include at least three properties: `name`, `weight`, and either `pageRef` or `url`. Use `pageRef` for internal page destinations and `url` for external destinations.
These are the available menu entry properties:
{{% include "/_common/menu-entry-properties.md" %}}
pageRef
: (`string`) The [logical path](g) of the target page. For example:
page kind|pageRef
:--|:--
home|`/`
page|`/books/book-1`
section|`/books`
taxonomy|`/tags`
term|`/tags/foo`
url
: (`string`) The destination URL. Use this for external destinations only.
## Nested menu
This nested menu demonstrates some of the available properties:
{{< code-toggle file=hugo >}}
[[menus.main]]
name = 'Products'
pageRef = '/products'
weight = 10
[[menus.main]]
name = 'Hardware'
pageRef = '/products/hardware'
parent = 'Products'
weight = 1
[[menus.main]]
name = 'Software'
pageRef = '/products/software'
parent = 'Products'
weight = 2
[[menus.main]]
name = 'Services'
pageRef = '/services'
weight = 20
[[menus.main]]
name = 'Hugo'
pre = '<i class="fa fa-heart"></i>'
url = 'https://gohugo.io/'
weight = 30
[menus.main.params]
rel = 'external'
{{< /code-toggle >}}
[`Menus`]: /methods/site/menus/
[Automatically]: /content-management/menus/#define-automatically
[In front matter]: /content-management/menus/#define-in-front-matter
[menu templates]: /templates/menu/
[menus]: /content-management/menus/
|
