Highlight which page is currently active.

halfd commented

2022-11-10 10:31:08 +00:00

Owner

Show which page the visitor is on, by highlighting it in the menu.

halfd added the

new-website

ui

labels 2022-11-10 10:31:08 +00:00

halfd self-assigned this 2022-11-10 10:31:08 +00:00

benjaoming was assigned by halfd

2022-11-11 14:15:13 +00:00

halfd removed their assignment 2022-11-11 14:15:21 +00:00

halfd commented

2022-11-11 14:15:40 +00:00

Author

Owner

I can't figure out how to do it in hugo :D

valberg commented

2022-11-11 20:53:33 +00:00

Owner

https://discourse.gohugo.io/t/another-way-to-make-a-menu-item-active/17029 has something

benjaoming commented

2022-11-11 23:06:25 +00:00

Owner

Yup, I think that this is the one we want:

{{ range . }}
  {{ $active := eq $.RelPermalink (.URL | relLangURL) }}
  {{ $active = or $active (eq $.Section (lower .Name)) }}
  <li>
    <a href="{{ .URL | relLangURL }}"{{ if $active }} class="active"{{ end }}>{{ .Name }}</a>
  </li>
{{ end }}

Yup, I think that this is the one we want: ``` {{ range . }} {{ $active := eq $.RelPermalink (.URL | relLangURL) }} {{ $active = or $active (eq $.Section (lower .Name)) }} <li> <a href="{{ .URL | relLangURL }}"{{ if $active }} class="active"{{ end }}>{{ .Name }}</a> </li> {{ end }} ```

benjaoming referenced a pull request that will close this issue

2022-11-11 23:19:26 +00:00

Mark current page active in menu #49

valberg closed this issue

2022-11-12 05:58:22 +00:00

benjaoming commented

2022-11-12 11:29:51 +00:00

Owner

Ah yeah btw @halfd the change just adds a CSS class "active" to the menu item, but it doesn't actually style it :)

👍 1

Highlight which page is currently active. #44