# Nested menus - partial rendering

**URL:** <https://discourse.gohugo.io/t/nested-menus-partial-rendering/5330>\
**Category:** support\
**Created:** [February 4, 2017, 7:20am UTC](https://discourse.gohugo.io/t/nested-menus-partial-rendering/5330 "2017-02-04T07:20:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lws](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lws/32/1825_2.png) [@lws](https://discourse.gohugo.io/u/lws)\
**Post date:** [February 4, 2017, 7:20am UTC](https://discourse.gohugo.io/t/nested-menus-partial-rendering/5330/1 "2017-02-04T07:20:02Z")

</div>

Suppose that I have a nested menu structure:

- Colours
  - Red
    - Red
    - Scarlet
    - Maroon

  - Blue
    - Blue
    - Navy
    - Ultramarine

- People
  - A
    - Alice
    - Alison

  - B
    - Bob
    - Bill

On each page, I would like to render a _partial_ view of the menu.

- Parts of the menu not on the current path, should be **excluded** from the output.
  - Note: not “included, then hidden with Javascript”. I mean _never included_ in the output HTML at all. Reason: The full menu contains thousands of items.

- The parent(s) of the current page, should be highlighted. (i.e. bold.)

Example: on the page for “Maroon”, the menu should render as:

- **Colours**
  - **Red**
    - Red
    - Scarlet
    - **Maroon**

  - Blue

- People

How can I accomplish this?

The [documentation for menus](https://gohugo.io/extras/menus/) mentions some functions `IsMenuCurrent` and `HasMenuCurrent`, which were implemented [(#367)](https://github.com/spf13/hugo/issues/367) but not documented [(#1393)](https://github.com/spf13/hugo/issues/1393). I’m willing to submit a PR documenting these, if someone can help me understand how they work.

The thread [Confusion regarding proper use of menus](https://discuss.gohugo.io/t/confusion-regarding-proper-use-of-menus/1647/12) also refers.

Edit: [See also.](https://discuss.gohugo.io/t/highlight-sections-menu-item-when-in-any-page-of-that-section/910/4)

---

<div class="post-metadata">

**Author:** ![lws](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lws/32/1825_2.png) [@lws](https://discourse.gohugo.io/u/lws)\
**Post date:** [February 4, 2017, 5:52pm UTC](https://discourse.gohugo.io/t/nested-menus-partial-rendering/5330/2 "2017-02-04T17:52:57Z")

</div>

I think I have this mostly licked.

Remaining problems:

- If the current item is a Node (i.e. `/categories/colours/`) then `IsMenuCurrent()` and `HasMenuCurrent()` don’t work.

# /layouts/partials/menu\_top.html

```
<nav>
  {{ partial "menu_recursive.html" (dict "menu" .Site.Menus.main "page" . ) }}
</nav>

```

# /layouts/partials/menu\_recursive.html

```
{{ $page := .page }}
<ul>
{{ range .menu.ByName }}
  {{ $iz := $page.IsMenuCurrent "main" . }}
  {{ $haz := $page.HasMenuCurrent "main" . }}
  {{ if .HasChildren }} 
    <li>
      <a href="{{ .URL | relURL }}" class="{{ if or $iz $haz }}hot{{end}}"> {{ .Pre }} {{ .Name }}</a>
      {{ if or $iz $haz }}
        {{ partial "menu_recursive.html" (dict "menu" .Children "page" $page) }}
      {{ end }}
    </li>
  {{ else }}
    <li class="{{ if $haz }}hot{{end}}">
      <a href="{{ .URL | relURL }}" class="{{ if $iz }}hot{{end}}">{{ .Name }}</a>
    </li>
  {{ end }}
{{ end }}
</ul>

```

# Live example

[Working well](https://fleeting.penwatch.net/signals/block/limiter_rail/):

 ![](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/9/90577059415cc11e484ccbaf8ae0050e28b3e480.png)

[Not so good](https://fleeting.penwatch.net/signals/categories/block/):

 ![](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/6/66e399df08c4e0366cb8b3954bc23a0fb679bf8e.png)

- [Theme: LiaungYip/plain-docs](https://github.com/LiaungYip/plain-docs)
- [Live example](https://fleeting.penwatch.net/signals/) ([Source](https://github.com/LiaungYip/signals-docs))