Using headers (h1, h2 etc) in menu listing?

support
1

Hi,

I’d like to list the headers as menu items in a typical Hugo menu. Check our site for an example:

http://vamp.io/documentation/rest-api/deployments/

This page has many h2 elements with id tags. I would like the to use either as submenu items in the menu on the left. I’ve tried some options, but somehow I’m not grasping how/if this can be done.

Regards,

Tim

2

The feature you want is Table of Contents or TOC.

Documentation is at http://gohugo.io/extras/toc/

The site looks great. We’d love to add it to the showcase. Can you send a PR?

Best,
Steve

3

The example looks like a regular menu (pointing to other pages on the site), not a ToC (navigation on the same page).

Hugo’s docs site is the only relevant example I can think of, see

https://raw.githubusercontent.com/spf13/hugo/master/docs/content/content/summaries.md

Notice the menu with the parent reference.

4

I guess I want the TOC headers to be part of the menu. This is a very common thing, especially with documentation sites. Check http://getbootstrap.com/css/#code-user-input for instance. The various TOC headers are also part of the right hand side menu. Could this be done?

5

@spf13 I’d love to be featured, but what/why/how do you mean “send a pull request”? As in fork the docs ?

6

To add a theme, send a pull request to the hugoThemes repo. Instructions are in the README.

7

@dhersam now I’m confused ;o) I don’t have a theme or want to add a theme. I’d like to know if I can add the contents of the TOC object (the TOC headers) into a menu.

8

@dhersam replied to the above. What he SHOULD have said was to open up a pull request at

With additions in the showcase sections on the Hugo /docs.

9

Ok! Our site is featured in the showcases, but I’m still figuring out how to get TOC headers in my menu. ;o)

10

I have no idea what you mean by “ToC headers in menu”.

11

@bep Ok, let me re-explain my original question. I would like to have headers show up in a menu.
I have a page in markdown as follows:

h1 header

bla bla

h2 header

bla bla

I can use the TOC functionality in Hugo as noted by @spf13 in http://gohugo.io/extras/toc/ to generate a table of contents somewhere on that page. That’s all clear and works great!

What I want is to have the entries in the table of contents show up in a side menu as menu items, exactly like many documentation sites, like http://getbootstrap.com/css/#code-user-input

12

And if “somewhere on that page” is in a side menu, wouldn’t that solve your use case? The .TableOfContents can be put anywhere on the page.

13

@bep Nah, I’m afraid the MenuEntry struct does not allow this, which kinda makes sense looking at the Hugo source code. If you embed {{ .TableOfContents }} in any way or form inside a Menu, Hugo throws errors:

ERROR: 2015/07/03 template: partials/side_nav.html:20:27: executing "partials/side_nav.html" at <.TableOfContents>: TableOfContents is not a field of struct type *hugolib.MenuEntry in partials/side_nav.html

Note: my side_nav.html is a separate partial used to render the menu you see on the left at http://vamp.io/documentation/

14

OK, now I think I understand.

The “changing dot context” should be explained in big neon letters in the documentation.

In your error situation your current context is a MenuEntry instance … with no TableOfContents.

But I guess your menu partial takes an Node or Page as input, so the outer-most context is a Node or Page.

To get to that, you would either have to save it in a variable or use the $ operator:

$n := .
$n.TableOfContents

// or just ...
$.TableOfContents

As only content pages have content, you would want to check for that, too:

if $.IsPage
    $.TableOfContents