diff options
Diffstat (limited to 'docs/content/en/content-management/menus.md')
-rw-r--r-- | docs/content/en/content-management/menus.md | 157 |
1 files changed, 11 insertions, 146 deletions
diff --git a/docs/content/en/content-management/menus.md b/docs/content/en/content-management/menus.md index 15cf505ea..ab1bcbfa1 100644 --- a/docs/content/en/content-management/menus.md +++ b/docs/content/en/content-management/menus.md @@ -1,14 +1,8 @@ --- title: Menus -description: Create menus by defining entries, localizing each entry, and rendering the resulting data structure. -categories: [content management] -keywords: [menus] -menu: - docs: - parent: content-management - weight: 190 -weight: 190 -toc: true +description: Create menus by defining entries, localizing each entry, and rendering the resulting data structure. +categories: [] +keywords: [] aliases: [/extras/menus/] --- @@ -28,9 +22,8 @@ There are three ways to define menu entries: 1. In front matter 1. In site 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. -{{% /note %}} +> [!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 @@ -62,39 +55,16 @@ menus = ['main','footer'] 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`. -{{% /note %}} +> [!note] +> The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`. -### Properties {#properties-front-matter} +### Properties Use these properties when defining menu entries in front matter: -identifier -: (`string`) Required when two or more menu entries have the same `name`, or when localizing the `name` using translation tables. Must start with a letter, followed by letters, digits, or underscores. +{{% include "/_common/menu-entry-properties.md" %}} -name -: (`string`) The text to display when rendering the menu entry. - -params -: (`map`) User-defined properties for the menu entry. - -parent -: (`string`) The `identifier` of the parent menu entry. If `identifier` is not defined, use `name`. Required for child entries in a nested menu. - -post -: (`string`) The HTML to append when rendering the menu entry. - -pre -: (`string`) The HTML to prepend when rendering the menu entry. - -title -: (`string`) The HTML `title` attribute of the rendered menu entry. - -weight -: (`int`) A non-zero integer indicating the entry's position relative the root of the menu, or to its parent for a child entry. Lighter entries float to the top, while heavier entries sink to the bottom. - -### Example {#example-front-matter} +### Example This front matter menu entry demonstrates some of the available properties: @@ -112,111 +82,7 @@ Access the entry with `site.Menus.main` in your templates. See [menu templates] ## Define in site configuration -To define entries for the "main" menu: - -{{< code-toggle file=hugo >}} -[[menus.main]] -name = 'Home' -pageRef = '/' -weight = 10 - -[[menus.main]] -name = 'Products' -pageRef = '/products' -weight = 20 - -[[menus.main]] -name = 'Services' -pageRef = '/services' -weight = 30 -{{< /code-toggle >}} - -This creates a menu structure that you can access with `site.Menus.main` in your templates. See [menu templates] for details. - -To define entries for the "footer" menu: - -{{< code-toggle file=hugo >}} -[[menus.footer]] -name = 'Terms' -pageRef = '/terms' -weight = 10 - -[[menus.footer]] -name = 'Privacy' -pageRef = '/privacy' -weight = 20 -{{< /code-toggle >}} - -This creates a menu structure that you can access with `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`. -{{% /note %}} - -### Properties {#properties-site-configuration} - -{{% note %}} -The [properties available to entries defined in front matter] are also available to entries defined in site configuration. - -[properties available to entries defined in front matter]: /content-management/menus/#properties-front-matter -{{% /note %}} - -Each menu entry defined in site configuration requires two or more properties: - -- Specify `name` and `pageRef` for internal links -- Specify `name` and `url` for external links - -pageRef -: (`string`) The logical path of the target page, relative to the `content` directory. Omit language code and file extension. Required for *internal* links. - -Kind|pageRef -:--|:-- -home|`/` -page|`/books/book-1` -section|`/books` -taxonomy|`/tags` -term|`/tags/foo` - -url -: (`string`) Required for *external* links. - -### Example {#example-site-configuration} - -This nested menu demonstrates some of the available properties: - -{{< code-toggle file=hugo >}} -[[menus.main]] -name = 'Products' -pageRef = '/products' -weight = 10 - -[[menus.main]] -name = 'Hardware' -pageRef = '/products/hardware' -parent = 'Products' -weight = 1 - -[[menus.main]] -name = 'Software' -pageRef = '/products/software' -parent = 'Products' -weight = 2 - -[[menus.main]] -name = 'Services' -pageRef = '/services' -weight = 20 - -[[menus.main]] -name = 'Hugo' -pre = '<i class="fa fa-heart"></i>' -url = 'https://gohugo.io/' -weight = 30 -[menus.main.params] -rel = 'external' -{{< /code-toggle >}} - -This creates a menu structure that you can access with `site.Menus.main` in your templates. See [menu templates] for details. +See [configure menus](/configuration/menus/). ## Localize @@ -226,7 +92,6 @@ Hugo provides two methods to localize your menu entries. See [multilingual]. See [menu templates]. -[localize]: /content-management/multilingual/#menus [menu templates]: /templates/menu/ [multilingual]: /content-management/multilingual/#menus [template]: /templates/menu/ |