mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
8d9511a08f
316cec249 Update future events template example (#1595) 3bde7d489 Install mage outside module (#1592) 762e27eff Clarify ignoreFiles regex matching 4d0032051 Add id attribute to h2 elements (#1590) 8262b077c Improve inline resource examples (#1587) 2eae7c7ec fix disqus example name (#1588) a772f4804 Added install instructions for openSUSE Tumbleweed (#1459) 7ad1c301b Remove screen capture from Hosting on GitHub page (#1586) a58541f49 add more details on about gh-pages and baseURL on hosting-on-github.md (#1346) 3bd0b46dc Update configuration page (#1585) 4cf1f013e Update OS functions 2c45a95c2 Remove getting-started/code-toggle/ 40fdff598 Describe artificial language private use subtags (#1577) 91011d210 Remove google_news from list of internal templates (#1576) 36c7879e4 Update the .Unix function 731063488 Remove a showcase 818c371a0 Update index.md 3136d39d9 netlify: Hugo 0.89.4 092bc9278 Merge branch 'tempv0.89.4' 18e01f105 releaser: Add release notes to /docs for release of 0.89.4 79135281f Correct and sort list of target image formats (#1574) af4170c7e netlify: Hugo 0.89.3 7f5444251 Merge branch 'tempv0.89.3' a32e4a6c2 releaser: Add release notes to /docs for release of 0.89.3 6dd3dc3f9 Update configuration.md 5fbe741d7 Update index.md (#1570) 37a69496f netlify: Bump to Hugo 0.89.2 3b293f1f4 Merge branch 'tempv0.89.2' 64c934e7a releaser: Add release notes to /docs for release of 0.89.2 919c51c7d Update index.md 13dd463b1 netlify: Hugo 0.89.1 d8cda1474 releaser: Add release notes to /docs for release of 0.89.1 a2adf7742 releaser: Add release notes to /docs for release of 0.89.1 c3088c4fc Add code toggle to menus page (#1568) 2d0f38978 Remove blank lines from code-toggle output (#1564) 7cf058bfd Add localization examples (#1563) cf8627c2e Fixing typos, fixing incomplete link (#1561) c78cc014b Document the removePathAccents setting 70beddaf4 Make corrections to 0.89.0 release notes (#1560) 1917195f0 Update index.md 7fb8e070c Run hugo --gc 1772d45fb Release 0.89.0 d9006179b Merge branch 'tempv0.89.0' 8db86b61e releaser: Add release notes to /docs for release of 0.89.0 abf268571 docs: Regen CLI docs fbbdb0ab1 Update the timeout default 9cbd1c15a Fix description of lang.FormatNumberCustom 6043b54cc Remove "render" keyword from Host on Render page f8ea8e84f Clarify description of front matter url (#1557) 91a0c9954 Update Twitter shortcode oEmbed endpoint 79a7405b8 Merge commit 'aa5ac36a3eb68b86c803caec703869efefc8447e' 57667bae6 hugofs: Add includeFiles and excludeFiles to mount configuration 0c9ee0a04 Allow multiple plugins in the PostCSS options map 155799e6b docs: Create path.Clean documentation git-subtree-dir: docs git-subtree-split: 316cec2494dc5f908283289371d74f36a73d3d8d
133 lines
4 KiB
Markdown
133 lines
4 KiB
Markdown
---
|
||
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
|
||
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 %}}
|
||
|
||
See the [Menu Entry Properties][me-props] for all the variables and functions related to a menu entry.
|
||
|
||
## 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
|
||
|
||
{{< code-toggle >}}
|
||
menu: "main"
|
||
{{< /code-toggle >}}
|
||
|
||
#### Multiple Menus
|
||
|
||
{{< code-toggle >}}
|
||
menu: ["main", "footer"]
|
||
{{< /code-toggle >}}
|
||
|
||
#### Advanced
|
||
|
||
{{< code-toggle >}}
|
||
menu:
|
||
docs:
|
||
parent: 'extras'
|
||
weight: 20
|
||
{{< /code-toggle >}}
|
||
|
||
## Add Non-content Entries to a Menu
|
||
|
||
You can also add entries to menus that aren’t attached to a piece of content. This takes place in your Hugo project's [`config` file][config].
|
||
|
||
Here’s an example snippet pulled from a configuration file:
|
||
|
||
{{< code-toggle file="config" >}}
|
||
[[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>"
|
||
post = "<span class='alert'>New!</span>"
|
||
weight = -100
|
||
url = "/getting-started/"
|
||
{{< /code-toggle >}}
|
||
|
||
{{% 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 override 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.
|
||
|
||
## Params
|
||
|
||
You can also add user-defined content to menu items via the `params` field.
|
||
|
||
A common use case is to define a custom param to add a css class to a specific menu item.
|
||
|
||
{{< code-toggle file="config" >}}
|
||
[[menu.main]]
|
||
name = "about hugo"
|
||
pre = "<i class='fa fa-heart'></i>"
|
||
weight = -110
|
||
identifier = "about"
|
||
url = "/about/"
|
||
[menu.main.params]
|
||
class = "highlight-menu-item"
|
||
{{</ code-toggle >}}
|
||
|
||
## 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/
|
||
[me-props]: /variables/menus/
|