Nested Menu Troubles

jkinley · July 2, 2019, 3:26am

Hi Hugo Peeps!

Here is the site I am currently working on: https://github.com/jkinley/jk-docs

I am creating menu structure from front-matter
I added code I found on the community for a recursive menu
Fairly certain that I want a parent link in the nav to NOT navigate to the _index.md content but rather to open submenus (eventually accordion style)

My top-level Menu Items (Gizmos and Widgets) have an overview page that is the _index.md and results in a list of children items. In the case of Gizmos, that is Overview, Resources, Tutorial, and a branch bundle—Articles.

Question: How do I make the branch bundle, Articles, have an overview page that lists the 3 articles?

I have tried a number of different things in the front-matter and I can’t get it to work.

As always, thanks for any insight.

davidsneighbour · July 2, 2019, 12:27pm

I have the feeling that this one here:

github.com

jkinley/jk-docs/blob/master/content/docs/gizmos/_index.md

---
title: Gizmos Overview
LinkTitle: Overview
weight: 1

menu:
  docs:
    parent: Gizmos
    identifier: gizmos-overview
---

I would like this page to list any single pages in this directory (e.g Resources and Tutorial) AND the top-level subdirectory (in this case "Articles").

So it would look like this:

- Tutorial
- Articles
- Resources

should not have a parent menu. It actually is the parent menu… Try without parent and see what happens.

jkinley · July 2, 2019, 2:40pm

Hi Patrick, thanks for the suggestion. I tried that, but no luck. If that file does not have a parent declared, then it makes it a top-level item, where as I want that Overview page to be under Gizmos. Also, I want the same behavior in the nested items below(e.g. Articles). Anyway, I’ll keep working at it. Thanks!

davidsneighbour · July 2, 2019, 2:55pm

Keep the repo public. I’ll try to find time tomorrow to load it and see what I can do. The templates don’t look faulty to me, so it’s probably within the frontmatter somewhere.

jkinley · July 2, 2019, 2:56pm

Will do. The repo is just a test site for me to make it easier to ask questions. I appreciate the help. To be clear, here is what I think I am trying to accomplish:

Gizmos (parent, opens menu)

Overview (_index.md, list template, displays top-level children in this section: Tutorial, Resources, Articles)
Tutorial
Resources
Articles (parent, opens menu)
- Overview (_index.md, list template, displays top-level children in this section: Article 1, 2 and 3)
- Article 1
- Article 2
- Article 3

Thanks again. Be well.

davidsneighbour · July 3, 2019, 5:52am

I am not sure if I understand 100% what you are trying to achieve, but try this:

In file content/docs/gizmos/articles/_index.md

change the frontmatter to:

---
title: Articles
LinkTitle: Overview
weight: 4

menu:
  docs:
    parent: gizmos-articles
    identifier: gizmos-articles-overview
---

jkinley · July 7, 2019, 10:09pm

Thanks again, Patrick. When I do as you suggest, the articles section gets pulled out of the gizmos section. It is supposed to be nested under the Gizmos section.

I am just looking for a way to build a mult-level menu system. Parents open an accordion to reveal the children. Click on the children and they navigate to the content. I am just looking for standard behavior. Nothing out of the ordinary. Here is a very common example:

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

pointyfar · July 8, 2019, 9:32am

Hi,

So the way I understand your question is that there are really two parts to it:

What structure / hierarchy do you want generated: What pages get nested under where
How to style it. The ‘accordion style’ that you reference is really a mix of CSS and probably some JS, and technically is outside the scope of Hugo and these forums.
We can probably help you with the first, and that should help you get the rest of the way with styling your menu.

So back to the first part:

When I run your site and navigate to /docs/, I see the following menu in the sidebar:

Gizmos
  Overview
  Resources
  Tutorial
  Articles
    Article 1
    Article 2
    Article 3
Widgets
  Overview

This sounds pretty close to what you mention in your original question

For the moment leaving the question of what behaviour you want when clicking each menu item, is this not the hierarchy you want?

If not, what do you want?

jkinley · July 8, 2019, 2:20pm

Hi, Pointyfar. Thanks for your help. CSS styles are out of the scope of this question. This post is specifically dealing with structure. Your outline follows what I had posted above. So to answer you first question, yes this is the hierarchy I want. But to be clear its technically

Home
About
Contact
Docs
    Gizmos
        Overview
        Resources
        Tutorial
        Articles
           Article 1
           Article 2
           Article 3
    Widgets
        Overview
        Resources
        Tutorial

But this question is just focusing on the docs section and making a nested menu for the docs content. Make sense?

Thanks so much. Jeff

pointyfar · July 9, 2019, 12:32am

I suppose I still don’t understand what the actual question is, then.

If this is what you want:

Docs
    Gizmos
        Overview
        Resources
        Tutorial
        Articles
           Article 1
           Article 2
           Article 3

And this is what is currently being output:

Gizmos
  Overview
  Resources
  Tutorial
  Articles
    Article 1
    Article 2
    Article 3

Do you just want to nest the Gizmos tree under Docs? If so then just set the Gizmos menu parent to Docs.

pointyfar · July 9, 2019, 1:01am

So we don’t keep going back and forth on this, let’s walk through how you could go about constructing your menu.

Let’s construct the menu using the frontmatter method. Note that this is not the only way to create a menu.

Let’s say that you want a docs menu with this hierarchy:

Docs
    Gizmos
        Overview
        Resources
        Tutorial
        Articles
           Article 1
           Article 2
           Article 3

Let’s start at the top of the menu tree. In this case it is Docs. So in content/docs/_index.md:

title: Docs
menu:
  docs:
    name: Docs

Moving down the tree, we want to nest Gizmos under Docs. So in content/docs/gizmos/_index.md:

title: Gizmos Overview
menu:
  docs:
    parent: Docs
    name: Gizmos

Then we want to nest Resources, Tutorial, Articles under Gizmos:

title: Gizmos Resources
menu:
  docs:
    parent: Gizmos
    name: Resources

title: Gizmos Tutorial
menu:
  docs:
    parent: Gizmos
    name: Tutorial

title: Articles
menu:
  docs:
    name: Articles
    parent: Gizmos

Then all the articles under Articles:

title: Article One
menu:
  docs:
    parent: Articles

And so on…

Modify to suit, and add the menu weights as necessary.

jkinley · July 17, 2019, 3:16pm

Thanks again. I have not forgotten about this. Will let you know how I make out.