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
4 KiB
| title | linktitle | description | date | publishdate | lastmod | categories | keywords | draft | menu | weight | aliases | toc | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Menus | Menus | Hugo has a simple yet powerful menu system. | 2017-02-01 | 2017-02-01 | 2017-03-31 |
|
|
false |
|
120 |
|
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. {{% /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. 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, you can define language-independent menus. {{% /note %}}
See the Menu Entry Properties 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.
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.
Here’s an example snippet pulled from a configuration file:
{{< code-toggle file="config" >}} menu.main name = "about hugo" pre = "" weight = -110 identifier = "about" url = "/about/" menu.main name = "getting started" pre = "" post = "New!" 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. 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 = "" weight = -110 identifier = "about" url = "/about/" [menu.main.params] class = "highlight-menu-item" {{</ code-toggle >}}
Render Menus
See Menu Templates for information on how to render your site menus within your templates.