Menu icon Foundation
Root variable in links not working for pages in subdirectories

On the Foundation site I am working on, there is a dropdown topbar in a navigation partial that populates its links from several YML files in src/data (one per dropdown category). Each entry looks something like this:

link:
  text: "Link"
  url:  "alpha/page1.html"
  external: false

The piece of the partial that generates each menu entry is as follows:

{{#each category}}
    <li><a href="{{#unless external}}{{root}}{{/unless}}{{url}}" {{#if external}}target="_blank"{{/if}}>{{text}}</a></li>
{{/each}}

The goal is for the link to be relative to the site's root if external is false, and used as-is (and open a new tab) if external is true.

The problem is that internal links don't seem to generate properly when the page I am navigating from is in a subdirectory. For example, if I am on "example.com/alpha/page1.html", the menu link points to "example.com/alpha/beta/page2.html" instead of "example.com/beta/page2.html".

How can I change my code to properly generate the links for the pages?

EDIT: I figured out the issue. Inside the "each" block, the Handlebars context changes, making variables like "root" only accessible through the parent context. The issue can be fixed by replacing "{{root}}" with "{{../root}}".

paniniHandlebars

On the Foundation site I am working on, there is a dropdown topbar in a navigation partial that populates its links from several YML files in src/data (one per dropdown category). Each entry looks something like this:

link:
  text: "Link"
  url:  "alpha/page1.html"
  external: false

The piece of the partial that generates each menu entry is as follows:

{{#each category}}
    <li><a href="{{#unless external}}{{root}}{{/unless}}{{url}}" {{#if external}}target="_blank"{{/if}}>{{text}}</a></li>
{{/each}}

The goal is for the link to be relative to the site's root if external is false, and used as-is (and open a new tab) if external is true.

The problem is that internal links don't seem to generate properly when the page I am navigating from is in a subdirectory. For example, if I am on "example.com/alpha/page1.html", the menu link points to "example.com/alpha/beta/page2.html" instead of "example.com/beta/page2.html".

How can I change my code to properly generate the links for the pages?

EDIT: I figured out the issue. Inside the "each" block, the Handlebars context changes, making variables like "root" only accessible through the parent context. The issue can be fixed by replacing "{{root}}" with "{{../root}}".

This post has been closed. No new replies can be added.