Menus
Syntax
SITE.Menus
Returns
navigation.Menus
The Menus method on a Site object returns a collection of menus, where each menu contains one or more entries, either flat or nested. Each entry points to a page within the site, or to an external resource.
A site can have multiple menus. For example, a main menu and a footer menu:
hugo.
menus:
footer:
- name: Legal
pageRef: /legal
weight: 10
- name: Privacy
pageRef: /privacy
weight: 20
main:
- name: Home
pageRef: /
weight: 10
- name: Books
pageRef: /books
weight: 20
- name: Films
pageRef: /films
weight: 30
[menus]
[[menus.footer]]
name = 'Legal'
pageRef = '/legal'
weight = 10
[[menus.footer]]
name = 'Privacy'
pageRef = '/privacy'
weight = 20
[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10
[[menus.main]]
name = 'Books'
pageRef = '/books'
weight = 20
[[menus.main]]
name = 'Films'
pageRef = '/films'
weight = 30
{
"menus": {
"footer": [
{
"name": "Legal",
"pageRef": "/legal",
"weight": 10
},
{
"name": "Privacy",
"pageRef": "/privacy",
"weight": 20
}
],
"main": [
{
"name": "Home",
"pageRef": "/",
"weight": 10
},
{
"name": "Books",
"pageRef": "/books",
"weight": 20
},
{
"name": "Films",
"pageRef": "/films",
"weight": 30
}
]
}
}
This template renders the main menu:
{{ with site.Menus.main }}
<nav class="menu">
{{ range . }}
{{ if $.IsMenuCurrent .Menu . }}
<a class="active" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
{{ else }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
{{ end }}
</nav>
{{ end }}
When viewing the home page, the result is:
<nav class="menu">
<a class="active" aria-current="page" href="/">Home</a>
<a href="/books/">Books</a>
<a href="/films/">Films</a>
</nav>
When viewing the “books” page, the result is:
<nav class="menu">
<a href="/">Home</a>
<a class="active" aria-current="page" href="/books/">Books</a>
<a href="/films/">Films</a>
</nav>
You will typically render a menu using a partial template. As the active menu entry will be different on each page, use the partial function to call the template. Do not use the partialCached function.
The example above is simplistic. Please see the menu templates section for more information.