{{navigation}} not working in partials

Themes
1

I create ./partials/navigation.hbs file and add this code:

<ul class="site-nav"> 
 {{#foreach navigation}} 
  <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}"> 
   <a href="{{url absolute="true"}}">{{label}}</a> 
  </li> 
 {{/foreach}}
</ul>

Then call it inside index.hbs whith this helper {{> "navigation"}}
But it shows nothing.
https://docs.ghost.org/api/handlebars-themes/helpers/navigation/#changing-the-template

It works correctly when using {{navigation}}
https://docs.ghost.org/api/handlebars-themes/helpers/navigation/#description

Why this happening? Is this bug?

2

That’s expected, the {{navigation}} helper is what sets up the context for ./partials/navigation.hbs to work.

By creating the partial file you are overriding the default template that {{navigation}} uses but you still need to use it as {{navigation}} inside index.hbs (or other file) rather than {{> "navigation"}}

3

But when I add custom class it doesn’t work. Like this:
{{#foreach navigation}}
<li class="customclass nav-{{slug}}{{#if current}} nav-current{{/if}}">
<a href="{{url absolute="true"}}">{{label}}</a>
</li>
{{/foreach}}
Cannot add custom class.

4

Sorry for the five year old post revive, but I’m having this exact issue and I’ve no clue what’s going wrong.

I have a partial called /partials/navigation.hbs and in that file theres this code:

        <nav class="gh-navigation-menu">
            <ul class="nav">
                {{#foreach navigation}}
                    <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}"><a href="{{url}}">{{label}}</a></li>
                {{/foreach}}
            </ul>
            {{#unless @site.members_enabled}}
                {{#match navigationLayout "Stacked"}}
                    {{> "search-toggle"}}
                {{/match}}
            {{/unless}}
        </nav>

I replaced the line {{navigation}} with the code from the aforementioned documentation. And nothing showed up. If I replace the {{#foreach navigation}} line with {{#foreach @self.navigation}} and it works, but only the {{label}} tag is properly populated. The {{slug}} {{url}} {{current}} don’t seem to work. So, I’m pretty confused on what to do.

I should also mention the navigation.hbs is just the normal “source” theme’s navigation file up until I swapped out the {{navigation}} like I did above.

5

Would you mind pasting in the code (probably from default.hbs) where you call the navigation helper? That’ll help with troubleshooting. :)

6

Thanks for the quick reply Cathy!

Here’s the code:

<div class="gh-viewport">
    
    {{> "components/navigation" navigationLayout=@custom.navigation_layout}}

    {{{body}}}
    
    {{> "components/footer"}}
    
</div>

The whole file is just the source default.hbs with some added script loading.

I also managed to find a work around for now since I was just trying originally to hide nav-current by adding this to my css sheet:

.nav-current {
    display: none;
}

But it would still be nice to know how to make custom navigation styling, for future reference :slightly_smiling_face:.

7

So what’s in components/navigation?

8

Oops my bad the navigation is in /partials/components/navigation.hbs, is the lack of partials in the path the issue?

9

Nope, the > automatically calls things in the partials folder