Menus

Returns a collection of menu objects for the given site.

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.