Menus Configuration

February 17, 2023 2 min read Configuration Docs Menus

Donate

Become a backer or sponsor to support our work.

On this page

Sponsors

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

Property	Type	Description
`name`	string	The name of menu.
`identifier`	string	The ID of menu.
`weight`	number	The weight of menu that used for sorting in ascending order.
`parent`	string	The `identifier` of parent menu entry.
`url`	string	The URL of menu.
`pre`	string	The leading string before menu name.
`post`	string	The trailing string after menu name.
`params`	object	Module 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.

Thursday, November 21, 2024 Friday, February 17, 2023