Menus
Overview
After defining menu entries, use menu methods to render a menu.
Three factors determine how to render a menu:
- The method used to define the menu entries: automatic, in front matter, or in site configuration
- The menu structure: flat or nested
- The method used to localize the menu entries: site configuration or translation tables
The example below handles every combination.
Example
This partial template recursively “walks” a menu structure, rendering a localized, accessible nested list.
Call the partial above, passing a menu ID and the current page in context.
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}
Page references
Regardless of how you define menu entries, an entry associated with a page has access to page context.
This simplistic example renders a page parameter named version
next to each entry’s name
. Code defensively using with
or if
to handle entries where (a) the entry points to an external resource, or (b) the version
parameter is not defined.
{{- range site.Menus.main }}
<a href="{{ .URL }}">
{{ .Name }}
{{- with .Page }}
{{- with .Params.version -}}
({{ . }})
{{- end }}
{{- end }}
</a>
{{- end }}
Menu entry parameters
When you define menu entries in site configuration or in front matter, you can include a params
key as shown in these examples:
This simplistic example renders a class
attribute for each anchor element. Code defensively using with
or if
to handle entries where params.class
is not defined.
Localize
Hugo provides two methods to localize your menu entries. See multilingual.