Correct way to link to a html element from a menu

support
1

I have this menu

identifier: item-1
name: item-1
url: "#section-1"

I create the links like this:

{{ $url := "" }}
{{ if (strings.Contains .URL "#") }}
  {{ $url = .URL | safeURL }}
{{ else }}
  {{ $url = .URL | absLangURL }}
{{ end }}

This works to create a link #item for the current active page. E.g

If I am on my home page the link will be en/#section-1

If I am on my page-1 the link will be en/page-1/#section-1

However, I need it to always be en/#section-1.

Any tips?

2

First, use pageRef instead of url when creating internal menu entries.

Second, use a menu entry parameter for the fragment.

[[menu.main]]
name = 'Home'
pageRef = '/'
weight = 10

[[menu.main]]
name = 'Posts'
pageRef = '/posts'
weight = 20

[[menu.main]]
name = 'Section 1'
pageRef = '/'
weight = 30
[menu.main.params]
fragment = 'section-1'

Then your menu partial looks something like:

{{ with site.Menus.main }}
  <nav class="menu">
    {{ range . }}
      {{ $href := .URL }}
      {{ with .Params.fragment }}
        {{ $href = printf "%s#%s" $href . }}
      {{ end }}
      {{ if $.IsMenuCurrent .Menu . }}
        <a class="active" aria-current="page" href="{{ $href }}">{{ .Name }}</a>
      {{ else }}
        <a href="{{ $href }}">{{ .Name }}</a>
      {{ end }}
    {{ end }}
  </nav>
{{ end }}

When you use pageRef instead of url in your menu entries, you don’t need to mess with relLangURL or whatever.

3

Super, Thank you.