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


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

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.



The feature you want is Table of Contents or TOC.

Documentation is at

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


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

Notice the menu with the parent reference.

I guess I want the TOC headers to be part of the menu. This is a very common thing, especially with documentation sites. Check for instance. The various TOC headers are also part of the right hand side menu. Could this be done?

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

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

@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.

@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.

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

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

@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 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

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.

@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

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 := .

// or just ...

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

if $.IsPage