1 files changed, 225 insertions, 0 deletions
diff --git a/docs/content/en/content-management/menus.md b/docs/content/en/content-management/menus.md
new file mode 100644
index 000000000..07bf41669
--- /dev/null
+++ b/docs/content/en/content-management/menus.md
@@ -0,0 +1,225 @@
+---
+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
+toc: true
+weight: 190
+aliases: [/extras/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
+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 %}}
+
+## Define automatically
+
+To automatically define menu entries for each top-level section of your site, enable the section pages menu in your site configuration.
+
+{{< code-toggle file="hugo" copy=false >}}
+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" copy=false fm=true >}}
+title = 'About'
+menu = '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" copy=false fm=true >}}
+title = 'Contact'
+menu = ['main','footer']
+{{< /code-toggle >}}
+
+Access the entry with `site.Menus.main` and `site.Menus.footer` in your templates. See [menu templates] for details.
+
+### Properties {#properties-front-matter}
+
+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.
+
+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}
+
+This front matter menu entry demonstrates some of the available properties:
+
+{{< code-toggle file="content/products/software.md" copy=false fm=true >}}
+title = 'Software'
+[menu.main]
+parent = 'Products'
+weight = 20
+pre = '<i class="fa-solid fa-code"></i>'
+[menu.main.params]
+class = 'center'
+{{< /code-toggle >}}
+
+Access the entry with `site.Menus.main` in your templates. See [menu templates] for details.
+
+
+## Define in site configuration
+
+To define entries for the "main" menu:
+
+{{< code-toggle file="hugo" copy=false >}}
+[[menu.main]]
+name = 'Home'
+pageRef = '/'
+weight = 10
+
+[[menu.main]]
+name = 'Products'
+pageRef = '/products'
+weight = 20
+
+[[menu.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" copy=false >}}
+[[menu.footer]]
+name = 'Terms'
+pageRef = '/terms'
+weight = 10
+
+[[menu.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.
+
+### 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 file 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" copy=false >}}
+[[menu.main]]
+name = 'Products'
+pageRef = '/products'
+weight = 10
+
+[[menu.main]]
+name = 'Hardware'
+pageRef = '/products/hardware'
+parent = 'Products'
+weight = 1
+
+[[menu.main]]
+name = 'Software'
+pageRef = '/products/software'
+parent = 'Products'
+weight = 2
+
+[[menu.main]]
+name = 'Services'
+pageRef = '/services'
+weight = 20
+
+[[menu.main]]
+name = 'Hugo'
+pre = '<i class="fa fa-heart"></i>'
+url = 'https://gohugo.io/'
+weight = 30
+[menu.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.
+
+## Localize
+
+Hugo provides two methods to localize your menu entries. See [multilingual].
+
+## Render
+
+See [menu templates].
+
+[localize]: /content-management/multilingual/#menus
+[menu templates]: /templates/menu-templates/
+[multilingual]: /content-management/multilingual/#menus
+[template]: /templates/menu-templates/