# Hugo TableOfContent menu for HTML pages

**URL:** <https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530>\
**Category:** support\
**Created:** [February 27, 2024, 11:58am UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530 "2024-02-27T11:58:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mickel1982](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mickel1982](https://discourse.gohugo.io/u/mickel1982)\
**Post date:** [February 27, 2024, 11:58am UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/1 "2024-02-27T11:58:30Z")

</div>

Is there a way to use Hugo’s TableOfContent menu on HTML pages? If so, how?

I’m not using markdown but HTML.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 27, 2024, 12:18pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/2 "2024-02-27T12:18:15Z")

</div>

No, there is not. Have a look at tocbot.js.

---

<div class="post-metadata">

**Author:** ![mickel1982](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mickel1982](https://discourse.gohugo.io/u/mickel1982)\
**Post date:** [February 27, 2024, 12:18pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/3 "2024-02-27T12:18:35Z")

</div>

Okay, thank you

---

<div class="post-metadata">

**Author:** ![mickel1982](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mickel1982](https://discourse.gohugo.io/u/mickel1982)\
**Post date:** [February 27, 2024, 12:33pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/4 "2024-02-27T12:33:31Z")

</div>

Also not if you add in the frontmatter of a page?

Ex:

toc:

- example-1
- example-2

I tried this and it showed up.

But it doesn’t show the title of the h2 tag.

It only shows **example-1** and **example-2** as titles of the tags.

```auto
{{ with .Params.toc }}{{ range . }}<p><a href="{{ . }}">{{ . }}</a></p>{{ end }}{{ end }}

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 27, 2024, 12:38pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/5 "2024-02-27T12:38:46Z")

</div>

Apparently your theme has implemented a non-standard way to generate table of contents entries based on front matter.

Please raise your question with the theme author.

---

<div class="post-metadata">

**Author:** ![mickel1982](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mickel1982](https://discourse.gohugo.io/u/mickel1982)\
**Post date:** [February 27, 2024, 12:39pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/6 "2024-02-27T12:39:27Z")

</div>

I’m not using any theme. I create my own themes. And I did not add any TOC configuration to my themes. I’m now using TOC menus that I add in each page with HTML.

EX:

```auto
<div id="toc">
<p>Contents</p>
<nav>
<ul>
<li><a href="#example-1">Example 1</a></li>
<li><a href="#example-2">Example 2</a></li>
</ul>
</nav>
</div>

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 27, 2024, 12:43pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/7 "2024-02-27T12:43:15Z")

</div>

Not to put too sharp an edge on this but, if you wrote the code, why are you asking us?

---

<div class="post-metadata">

**Author:** ![mickel1982](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mickel1982](https://discourse.gohugo.io/u/mickel1982)\
**Post date:** [February 27, 2024, 12:47pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/8 "2024-02-27T12:47:18Z")

</div>

Because I’m looking for a easier way to implement a TOC menu. Now I need to add the TOC menu on every page. And if I want to change something, I need to edit the TOC menu on all pages.

And because my pages are HTML and not markdown. So, there’s no standard way of using Hugo’s TOC menu feature. So maybe someone has a solution for HTML pages.

It’s fine if I need to add a few lines to the frontmatter of a page, like for example:

```auto
toc:
- example-1
- example-2

```

I’m thinking of creating a shortcode that I add to the pages that have a TOC menu (not all pages need a TOC menu).

EX. (single.html):

```auto
{{- if .Params.toc }}
{{ partial "toc.html" . }}
{{- end }}

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 27, 2024, 12:51pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/9 "2024-02-27T12:51:00Z")

</div>

> [@mickel1982](#):
>
> So maybe someone has a solution for HTML pages.

That’s why I suggested in my initial response that you have a look at tocbot.js.

Here’s a very simple example:

```plaintext
git clone --single-branch -b hugo-forum-topic-39819 https://github.com/jmooring/hugo-testing hugo-forum-topic-39819
cd hugo-forum-topic-39819
hugo server

```

---

<div class="post-metadata">

**Author:** ![mickel1982](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mickel1982](https://discourse.gohugo.io/u/mickel1982)\
**Post date:** [February 27, 2024, 12:53pm UTC](https://discourse.gohugo.io/t/hugo-tableofcontent-menu-for-html-pages/48530/10 "2024-02-27T12:53:44Z")

</div>

Okay, thanks for the tip.
