External link in header menu opened in another tab?

Support
1

Good evening Grav community.
I hope are all safe and well.

I created an external link as Alternative 3 is explained in this thread: External link in header menu? (Antimatter)

How can I set the link to open in another tab?
I try with the “?_blank” but it didn’t work. and also as a html, but also did not work.

Basically what I need is create in the header menu an external link to open in a different tab.

any clue will be much apreaciated.
thanks in advance
Carlos.

2

If you’re using Markdown then

[link text](link_url?target=blank)

should work.

3

Thanks @dan-james I’m using the template “external”

title: ‘External Link’
external_url: ‘https://your-external-site’

if I do

title: ‘External Link’
external_url:

I got an error.

4

Hi Carlos, the only (rather inelegant) fix I can think of is to modify the nav loop macro so it adds a "target=“blank” to external links.

  {% import _self as macros %}
  {% for p in page.children.visible %}
    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
    <li>
      <a href="{{ p.url }}" class="{{ active_page }}"
        {% if p.header.external_url %}
            target="blank" 
          {% endif %} 
          >
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}
5

Thanks dan-james.
what do you mean “rather inelegant”?
is because will take more time to load the external webpage or affect future grave updates?

thanks
Carlos.

6

Hi @cidelab, it won’t slow the page down, I just think there’s probably a more elegant logic method that could be used somewhere.

Regarding Grav updates, it might break, it might not. I tend to build my own themes so they’re not affected by Grav updates but if you’re using a theme, it may well break on certain updates.

I’ll think about a solution.

7

Thanks @dan_james,
at this point I guess you my note I’m quite new in this world. Yes I’m using a template that I have customized to my needs.

I found this link from 2017: https://github.com/getgrav/grav/issues/1680
but it doesn’t seems right to me.

I’m following your suggestion at the moment:

{% macro loop(page) %}
{% for p in page.children.visible %}
  {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
      <li id="menu-item-{{ loop.index }}" class="menu-item {% if p.children.visible.count > 0 %}menu-item-has-children has-dropdown{% endif %} menu-item-{{ loop.index }} not-click {{ current_page }}">
      <a href="{{ p.url }}">
          {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
            {% if p.header.external_url %} 
                target="blank" 
            {% endif %}
          {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
          <ul class="sub-menu dropdown">
              {{ _self.loop(p) }}
          </ul>
      {% endif %}
  </li>
{% endfor %}

{% endmacro %}

but is not working.

8

Solved!

          <a href="{{ p.url }}">
          {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
          {% if p.header.external_url %} <a href="{{ p.url }}" target="_blank"> {% endif %}
          {{ p.menu }}
          </a>

Thank you very much.
@dan-james

best
C,

9

Great! glad it worked : )

10

Hi @cidelab,

it looks like your solution will repeat <a href="{{ p.url}} twice…

          {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
          {% if p.header.external_url %} <a href="{{ p.url }}" target="_blank"> {% endif %}
          {{ p.menu }}
          </a>

the bit of code you want to conditionally add or not is the target="blank" section.

I’d stick with

      <a href="{{ p.url }}" class="{{ active_page }}"
        {% if p.header.external_url %}
            target="blank" 
          {% endif %} 
          >
        {{ p.menu }}
      </a>

Check the source of your page and see if the menu is getting two hrefs…

1 Like
11

Hi @dan-james, apologies to came back after a while. But only today I had the chance to check the code again.

You are right, in the mobile version I could see and extra space in the menu, I didn’t noted till now. I amend the code, following your indications and the blank space (the 2 refs) disappear and the link works perfect.

Thanks again.
all the best
Carlos.

12

Cheers Carlos, glad it worked.