Conditionally open a menu entry in a new tab

support
1

Hi,

How to do this conditionally though ?

I tried adding an is_external boolean, but the IDE says Schema validation: Property 'is_external' is not allowed and the terminal command outputs can't evaluate field is_external in type *navigation.MenuEntry :thinking:

Thanks

3

There are a couple of ways to do this.

1) Open all external URLs in new tab

{{ with site.Menus.main }}
  <nav class="menu">
    {{ range . }}
      {{ if (urls.Parse .URL).IsAbs }}
        <a href="{{ .URL }}" rel="external" target="_blank">{{ .Name }}</a>
      {{ else }}
        <a href="{{ .URL }}">{{ .Name }}</a>
      {{ end }}
    {{ end }}
  </nav>
{{ end }}

2) Configure each menu entry as needed

menus:
  main:
    - name: Home
      pageRef: /
      weight: 10
    - name: Posts
      pageRef: /posts
      weight: 20
    - name: Hugo
      url: https://gohugo.io/
      weight: 30
      params:
        external: true

{{ with site.Menus.main }}
  <nav class="menu">
    {{ range . }}
      {{ if .Params.external }}
        <a href="{{ .URL }}" rel="external" target="_blank">{{ .Name }}</a>
      {{ else }}
        <a href="{{ .URL }}">{{ .Name }}</a>
      {{ end }}
    {{ end }}
  </nav>
{{ end }}
1 Like
4

Thanks, here is how I integrated this into the menu.html partial:
e.g.
{{- if .Params.external }}**
{{- $attrs = merge $attrs (dict “target” “_blank”) }}
{{- else }}

{{- /*
Renders a menu for the given menu ID.

@context {page} page The current page.
@context {string} menuID The menu ID.

@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID -}}
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
{{- end -}}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if .Params.external }}**
      {{- $attrs = merge $attrs (dict "target" "_blank") }}
    {{- else }}
    {{- end }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    <li>
      <a
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ $name }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
{{- end }}

And the related menu entries in hugo.toml config file:

[menus]
    [[menus.main]]
        name = 'Poetry'
        url = '/'
        weight = 1
    [[menus.main]]
        name = 'Editorial'
        url = 'https://www.futchpress.info/'
        weight = 2
        [menus.main.params]
            external = true