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
4.3 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 %}}
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.
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 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 config.toml
:
{{< code file="config.toml" >}} menu.main name = "about hugo" pre = "" weight = -110 identifier = "about" url = "/about/" menu.main name = "getting started" pre = "" weight = -100 url = "/getting-started/" {{< /code >}}
Here's the equivalent snippet in a config.yaml
:
{{< code file="config.yml" >}} menu: main: - name: "about hugo" pre: "" weight: -110 identifier: "about" url: "/about/" - name: "getting started" pre: "" 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). All content entries are attached to one of these entries via the .Parent
field.
Render Menus
See Menu Templates for information on how to render your site menus within your templates.