hugo/content/content-management/menus.md

178 lines
4.3 KiB
Markdown
Raw Normal View History

---
title: Menus
linktitle: Menus
description: Hugo has a simple yet powerful menu system.
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-03-31
categories: [content management]
keywords: [menus]
draft: false
menu:
docs:
parent: "content-management"
weight: 120
weight: 120 #rem
aliases: [/extras/menus/]
toc: true
---
{{% note "Lazy Blogger"%}}
If all you want is a simple menu for your sections, see the ["Section Menu for Lazy Bloggers" in Menu Templates](/templates/menu-templates/#section-menu-for-lazy-bloggers).
{{% /note %}}
You can do this:
* Place content in one or many menus
* Handle nested menus with unlimited depth
* Create menu entries without being attached to any content
* Distinguish active element (and active branch)
## What is a Menu in Hugo?
A **menu** is a named array of menu entries accessible by name via the [`.Site.Menus` site variable][sitevars]. For example, you can access your site's `main` menu via `.Site.Menus.main`.
{{% note "Menus on Multilingual Sites" %}}
If you make use of the [multilingual feature](/content-management/multilingual/), you can define language-independent menus.
{{% /note %}}
A menu entry has the following properties (i.e., variables) available to it:
`.URL`
: string
`.Name`
: string
`.Menu`
: string
`.Identifier`
: string
`.Pre`
: template.HTML
`.Post`
: template.HTML
`.Weight`
: int
`.Parent`
: string
`.Children`
: Menu
Note that menus also have the following functions available as well:
`.HasChildren`
: boolean
Additionally, there are some relevant functions available to menus on a page:
`.IsMenuCurrent`
: (menu string, menuEntry *MenuEntry ) boolean
`.HasMenuCurrent`
: (menu string, menuEntry *MenuEntry) boolean
## Add content to menus
Hugo allows you to add content to a menu via the content's [front matter](/content-management/front-matter/).
### Simple
If all you need to do is add an entry to a menu, the simple form works well.
#### A Single Menu
```
---
menu: "main"
---
```
#### Multiple Menus
```
---
menu: ["main", "footer"]
---
```
#### Advanced
```
---
menu:
docs:
parent: 'extras'
weight: 20
---
```
## Add Non-content Entries to a Menu
You can also add entries to menus that arent attached to a piece of content. This takes place in your Hugo project's [`config` file][config].
Heres an example snippet pulled from a `config.toml`:
{{< code file="config.toml" >}}
[[menu.main]]
name = "about hugo"
pre = "<i class='fa fa-heart'></i>"
weight = -110
identifier = "about"
url = "/about/"
[[menu.main]]
name = "getting started"
pre = "<i class='fa fa-road'></i>"
weight = -100
url = "/getting-started/"
{{< /code >}}
Here's the equivalent snippet in a `config.yaml`:
{{< code file="config.yml" >}}
menu:
Squashed 'docs/' changes from 715741f73..4e7e1815b 4e7e1815b Fix some typos d23d8f5c4 Remove 'fundamentals' category from function pages 52fa65e15 Mention Chroma as the preferred syntax highlighter 64ca535db Merge commit '8762aee8afe30bec6f1fbc9560749983dc44d60b' 8762aee8a Squashed 'themes/gohugoioTheme/' changes from 396b859f..6f3a8bf5 03f0673a9 Move the gopher to the theme 320e268cd Spelling e45b640f7 More layout lookup work fe0ad9d9d Sync the YAML config menu example with TOML's b9505fc70 Remove template reference to ordinal numbers 0fa2532d3 Remove deprecated Hugoidx, add native hugo solution 2152b907c Fix a link in the last commit 47614f416 Manually specifying heading anchors in Markdown content 9d6770d2a Release notes 0.37.1 e1eed8b27 Remove some unused images e960046f5 releaser: Prepare repository for 0.38-DEV 4fa83a4ee releaser: Add release notes to /docs for release of 0.37.1 46c879995 releaser: Bump versions for release of 0.37.1 fb3ac5a3e releaser: Prepare repository for 0.38-DEV 4870c8e7b Update archetypes.md 232c0b578 Merge commit '2b18014fd0aa99e9f1a5610ba875101351a90de3' 2b18014fd Squashed 'themes/gohugoioTheme/' changes from fe71e360..396b859f 62567e9aa Add some "writing guidelines" 7cfd530d2 Revise the archetype docs 5d4c3c03c Update data-templates.md e5fee3099 Update page-bundles.md ca7f03c8d Update page-bundles.md 2a7fdc269 Fix typo 'vailable' to 'available' line 53 999b75201 LastMod should be Lastmod? 099f46ca5 Fix spacing in content-management/types.md 6bcdc58ef Word choice improvements 20e8a21f6 update rss linking docs 7ef44d262 Add some missing configuration entries f1c7aa568 Sort config list 5cb8ceade Create a proper definition list for the configuration settings 25dffe4ac Send custom dimensions in GA 55df01a34 Fix broken gtag 6c8772aad Add site to GA config e63acb894 Remove conflicting release note for 0.35 f30083a23 Add branch to GA config 99caedb96 Set the small-multiples to draft 4a33c70ab Polish the Small Multiples showcase 7b2f1ea2e Add small multiples showcase e78e96bae Add new sponsor c42943041 updated to new Forestry logo e07eda273 Add OS env to faq 414f0dbc6 Release Hugo 0.37 85f0cc324 Merge branch 'temp37' 1e6da9497 Rebuild images 75e97adfc releaser: Add release notes to /docs for release of 0.37 50b887cb0 releaser: Bump versions for release of 0.37 7acf73ba3 Merge commit '900b5f6cfe5a377ef369d26cd700201be4cf6b06' 819d02c30 Merge commit '374d184e6747678364fd61f5faf328ec9205eb6b' c7eacf018 Fix typos in development contribution doc git-subtree-dir: docs git-subtree-split: 4e7e1815b742659dec1c8f59a1896a3396c7b6e9
2018-03-11 15:39:20 -04:00
main:
- name: "about hugo"
pre: "<i class='fa fa-heart'></i>"
weight: -110
identifier: "about"
url: "/about/"
- name: "getting started"
pre: "<i class='fa fa-road'></i>"
weight: -100
url: "/getting-started/"
{{< /code >}}
{{% note %}}
The URLs must be relative to the context root. If the `baseURL` is `https://example.com/mysite/`, then the URLs in the menu must not include the context root `mysite`. Using an absolute URL will overide the baseURL. If the value used for `URL` in the above example is `https://subdomain.example.com/`, the output will be `https://subdomain.example.com`.
{{% /note %}}
## Nesting
All nesting of content is done via the `parent` field.
The parent of an entry should be the identifier of another entry. The identifier should be unique (within a menu).
The following order is used to determine an Identifier:
`.Name > .LinkTitle > .Title`
This means that `.Title` will be used unless `.LinkTitle` is present, etc. In practice, `.Name` and `.Identifier` are only used to structure relationships and therefore never displayed.
In this example, the top level of the menu is defined in your [site `config` file][config]). All content entries are attached to one of these entries via the `.Parent` field.
## Render Menus
See [Menu Templates](/templates/menu-templates/) for information on how to render your site menus within your templates.
[config]: /getting-started/configuration/
[multilingual]: /content-management/multilingual/
[sitevars]: /variables/