HUGO
News Docs Themes Community GitHub

ByWeight

Returns the given menu with its entries sorted by weight, then by name, then by identifier.

Syntax

MENU.ByWeight

Returns

navigation.Menu

The ByWeight method returns the given menu with its entries sorted by weight, then by name, then by identifier. This is the default sort order.

Consider this menu definition:

menus:
  main:
  - identifier: about
    name: About
    pageRef: /about
    weight: 20
  - identifier: services
    name: Services
    pageRef: /services
    weight: 10
  - identifier: contact
    name: Contact
    pageRef: /contact
    weight: 30
[menus]
  [[menus.main]]
    identifier = 'about'
    name = 'About'
    pageRef = '/about'
    weight = 20
  [[menus.main]]
    identifier = 'services'
    name = 'Services'
    pageRef = '/services'
    weight = 10
  [[menus.main]]
    identifier = 'contact'
    name = 'Contact'
    pageRef = '/contact'
    weight = 30
{
   "menus": {
      "main": [
         {
            "identifier": "about",
            "name": "About",
            "pageRef": "/about",
            "weight": 20
         },
         {
            "identifier": "services",
            "name": "Services",
            "pageRef": "/services",
            "weight": 10
         },
         {
            "identifier": "contact",
            "name": "Contact",
            "pageRef": "/contact",
            "weight": 30
         }
      ]
   }
}

To sort the entries by weight, then by name, then by identifier:

<ul>
  {{ range .Site.Menus.main.ByWeight }}
    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
  {{ end }}
</ul>

Hugo renders this to:

<ul>
  <li><a href="/services/">Services</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

In the menu definition above, note that the identifier property is only required when two or more menu entries have the same name, or when localizing the name using translation tables.

You can also sort menu entries using the sort function. For example, to sort by weight in descending order:

<ul>
  {{ range sort .Site.Menus.main "Weight" "desc" }}
    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
  {{ end }}
</ul>

When using the sort function with menu entries, specify any of the following keys: Identifier, Name, Parent, Post, Pre, Title, URL, or Weight.