Can a menu item open in a new tab?

support
1

Hello,
Hugo has a menu.html partial when I create a new theme, which shows the menus like this:

partials/menu.html

{{- with index site.Menus $menuID }}
  <nav class="main-navigation">
    <button class="menu-toggle"><span>Toggle Menu</span></button>

    <div class="menu-container">
      <ul class="menu">
        {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
      </ul>
    </div>
  </nav>
{{- end }}

Then, to display the menu, I include it in the header of my website:

{{ partial "menu.html" (dict "menuID" "main" "page" .) }}

This of course displays the menu items configured in hugo.toml. I looked at the Hugo documentation and found the rel="external" option, but I’m not sure if it’s the right one to use for opening links in a new tab. After trying it, I still don’t see rel="external" or target="_blank" on the menu items.

[languages]

  # English
  # --------------------------------------------------------------------------
  [languages.en]
    weight       = 1
    languageCode = "en-US"
    languageName = "English"

    # Menu
    [[languages.en.menu.main]]
      name   = "Home"
      url    = "/"
      weight = 1

    [[languages.en.menu.main]]
      name   = "About"
      url    = "/about/"
      weight = 2

    [[languages.en.menu.main]]
      name   = "External Link"
      url    = "https://website.com"
      weight = 3
        [languages.en.menu.main.params]
         rel = 'external'

I would appreciate any suggestions.

2

In there you create an <a> tag. Locate that, then you have some form of range in there. In that range you can check params via: {{ if eq .Params.rel "external" }} target="_blank"{{ end }} and add a browser target.

1 Like
3

Thank you. Is it possible to override that file in my theme? I don’t have a folder named internal in my theme structure.

4

That inline template is defind inline in the example shown at: Menus | Hugo. There is no external file for the walker.

So just copy that whole menu.html file to your layout/partials and adapt to your need.

This topic describes how: Conditionally open a menu entry in a new tab

Hint: you should use pageRef instead of url for your internal pages. See: Menus | Hugo

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.