Menus

Returns a collection of menu objects for the given site.

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.

Menus can be defined and localized in several ways. Please see the menus section for a complete explanation and examples.

A site can have multiple menus. For example, a main menu and a footer menu:

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.

Last updated: February 17, 2025 : all: Change shortcode usage and design to prevent invalid HTML (0fca8ef25)

Improve this page