Generate Navigation Menu From Content

support
1

Hey guys, I’m new to Hugo and enjoying the experience so far although I’ve struggled to get my head around building a menu from pieces of “content”. I’m finding the docs quite difficult to follow…

I’ve got an archetype “service” that I want to appear in the menu so that each service I create it automatically rendered into the sub menu without me having to manually add it in the site config (this is what im currently doing and it feels a bit cumbersome).

So essentially the menu structure im looking for is:

  • Services (on hover render the submenu)
    – Service A (service/service-a)
    – Service B (service/service-b)
    – Some static link

I’ve looked around and couldnt find any existing issues so either im being a bit dumb or im not using the correct terminology!

2

I assume you read this:

So instead of helping you with your specific problem, we should try to fix that page in the documentation.

Can you be specific about what in that documentation was unclear to you?

3

Thanks for the reply @bep

I think i’ve fixed my problem. It wasn’t clear to me that I could put menu configuration inside the front-matter of the content so it would render in a specific sub-menu.

Again this may be because I wasn’t using the correct terminology but I couldnt see anything regarding this in the docs? I must admit code snippets flipping between YAML/TOML isnt helping me here…

4

Can you elaborate on what you did to solve this.

We should try to answer our own questions with examples of the solution and not just “It has been fixed” – For achieving purposes, this post has little value until the solution is posted.

1 Like
5

I am having the same issue as the original person that posed the issue. I am also new to Hugo. I too would like to create a sub menu (as a drop down). I am not sure that I am using the correct Hugo terminology, is it “nested?”

Like other documentation sections, it would be nice if an example of the code required to accomplish nesting was provided. I have found few example Hugo sites that have a drop down menu that I can learn from.

Nothing I have tried has worked yet. I have tried different combinations of things in config.toml, front matter of the document, and changing document structure. If it helps, I am using the Ananke theme.

Thank you in advance for any help.

6

Have you seen http://gohugo.io/templates/menu-templates/ ?

7

I have seen that page and tried each of the options provided.

Nothing on the page specifically calls out sub menus, however I see a reference in the code for a sidebar menu.

Can I make a sub menu alone with config.toml or font matter? Do I need to add something to config.toml AND .md’s front matter? I have tried many different combinations without luck.

Thanks

8

You have to set a parent for the menu in the front matter as per http://gohugo.io/templates/menu-templates/#menu-entries-from-the-page-s-front-matter

I’ve used the examples on that page to get it working, but you do need to know html \ css to style it. I’m sorry, but don’t really have time to help you any more than point you in the direction of the relevant part of the docs.

9

The frontmatter example given there [1] is

---
title: Menu Templates
linktitle: Menu Templates
menu:
  docs:
    title: "how to use menus in templates"
    parent: "templates"
    weight: 130
---

What does docs refer to? It looks like the description of the menu entry. So the menu entry seems to be

how to use menus in templates

as a submenu under

templates

The template code which uses this data is given as

<nav class="sidebar-nav">
  {{ range .Site.Menus.main }}
    <a href="{{ .URL }}" title="{{ .Title }}">
      {{- .Name -}}
      {{- with .Page -}}
        <span class="date">
        {{- dateFormat " (2006-01-02)" .Date -}}
        </span>
      {{- end -}}
    </a>
  {{ end }}
</nav>

What is .Site.Menus.main? It looks like an array of all the menu definitions?

A menu definition has

  • .URL
  • .Title
  • .Name
  • .Date

I assume these four values are just printed for demo purposes.

I wonder how it works if menu entries are nested.

[1] http://gohugo.io/templates/menu-templates/#menu-entries-from-the-page-s-front-matter

10

Can I suggest going through the quick start guide, and then choosing a theme with menus similar to what you are looking for and then going through how they set everything up.

I think this will help more than me trying to explain.

Then when you have more specific questions about a particular example, we may find it easier to help you.

11

Thanks. That doc section definitely can take some improvement. I have opened an issue for that. In the meanwhile, here’s an explanation:

What does docs refer to?

.Site.Menus is an array or slice of menus. From the page front-matter, you can specify the menu (one of the elements of that whole array) where that page should go.

So in that example, that page is linked with the “docs” menu.

It looks like the description of the menu entry.

No.

The template code which uses this data is given as:

{{ range .Site.Menus.main }}

FYI, that template is from a later section, and is not at all related to the “docs” menu example. In the template, it is assuming that the user has a “main” menu in their .Site.Menus. It would be better to sync the examples on that doc page.

What is .Site.Menus.main?

“main” is a menu in .Site.Menus, and that is an array or slice of menu entries.

It looks like an array of all the menu definitions?

Think of that as an array of all page references (menu entries) that the user added to the “main” menu.

A menu definition has
.URL
…

A menu entry has many more parameters than that.

I assume these four values are just printed for demo purposes.

It just happens that the template example needs to use just those 4 menu entry parameters.

I wonder how it works if menu entries are nested.

To nest the menu entries, you specify the parent menu in the front-matter inside that menu param.

Here’s a debug print out of .Site.Menus that might look overwhelming at first. But give a minute or two, and try to understand that, and you’ll get the meaning of (Hugo Menus) life.

1 Like
12

Thanks again. I tried this path but all the themes I have seen do not have any drop down menus.

I will keep plugging on this.

13

@kaushalmodi : thank you for the useful explanations. Great to have a theme for debugging purposes!

Hugo_menu_entry_2018-03-19

@Allen616 : Probably we have to go for sites like

https://templated.co/
CSS, HTML5 & Responsive site templates, built by us and released for free under the Creative Commons.


100% Free under the Creative Commons

and look for a menu which fits. Then try to come up with a Hugo menu template by asking for help here where necessary.

The links are taken from the article by Paolo Bonzini
https://opensource.com/article/17/4/getting-started-jekyll!!

14

Haven’t tried this but, it should be able to adapt Hugo template code to the HTML here:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

Namely:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

The “link 1” to “link 3” pages would need to be marked (in frontmatter?) as children of the “dropdown” entry.