Menus Configuration

This article describes the properties of the menu entry and how to config the menus.

Menu Entry Properties

PropertyTypeDescription
namestringThe name of menu.
identifierstringThe ID of menu.
weightnumberThe weight of menu that used for sorting in ascending order.
parentstringThe identifier of parent menu entry.
urlstringThe URL of menu.
prestringThe leading string before menu name.
poststringThe trailing string after menu name.
paramsobjectModule scoped parameters.

Each menu set has its own identifier, such as main, footer, etc., which is associated with the corresponding module.

How to Configure Menus?

Hugo supports two ways of configuring menus: menu configuration files and page menus parameters (aka front matter).

menus.toml

1[[main]]
2  name = 'Example'
3  url = 'https://example.com'

menus.yaml

1main:
2- name: Example
3  url: https://example.com

menus.json

1{
2   "main": [
3      {
4         "name": "Example",
5         "url": "https://example.com"
6      }
7   ]
8}

The main is the identifier of the menu set.

When we want to add a page to the menu set, the easiest way is to set the following parameters on the page.

menus.toml

1[menu]
2  [menu.main]
3    weight = 2

menus.yaml

1menu:
2  main:
3    weight: 2

menus.json

1{
2   "menu": {
3      "main": {
4         "weight": 2
5      }
6   }
7}

It’s no need to explicitly specify the menu name and URL.

razonyang
Monday, July 15, 2024 Friday, February 17, 2023