Menus

Overview

To create a menu for your site:

1. Define the menu entries
2. Localize each entry
3. Render the menu with a template

Create multiple menus, either flat or nested. For example, create a main menu for the header, and a separate menu for the footer.

There are three ways to define menu entries:

1. Automatically
2. In front matter
3. In your project configuration

[!note] Although you can use these methods in combination when defining a menu, the menu will be easier to conceptualize and maintain if you use one method throughout the site.

Define automatically

To automatically define a menu entry for each top-level section of your site, enable the section pages menu in your project configuration.

{{< code-toggle file=hugo >}} sectionPagesMenu = 'main' {{< /code-toggle >}}

This creates a menu structure that you can access with site.Menus.main in your templates. See menu templates for details.

Define in front matter

To add a page to the "main" menu:

{{< code-toggle file=content/about.md fm=true >}} title = 'About' menus = 'main' {{< /code-toggle >}}

Access the entry with site.Menus.main in your templates. See menu templates for details.

To add a page to the "main" and "footer" menus:

{{< code-toggle file=content/contact.md fm=true >}} title = 'Contact' menus = ['main','footer'] {{< /code-toggle >}}

Access the entry with site.Menus.main and site.Menus.footer in your templates. See menu templates for details.

[!note] The configuration key in the examples above is menus. The menu (singular) configuration key is an alias for menus.

Properties

Use these properties when defining menu entries in front matter:

{{% include "/_common/menu-entry-properties.md" %}}

Example

This front matter menu entry demonstrates some of the available properties:

<!-- markdownlint-disable MD033 -->

{{< code-toggle file=content/products/software.md fm=true >}} title = 'Software' [menus.main] parent = 'Products' weight = 20 pre = '<i class="fa-solid fa-code"></i>' [menus.main.params] class = 'center' {{< /code-toggle >}}

<!-- markdownlint-enable MD033 -->

Access the entry with site.Menus.main in your templates. See menu templates for details.

Define in project configuration

See configure menus.

Localize

Hugo provides two methods to localize your menu entries. See multilingual.

Render

See menu templates.