How do you make top navigation?

Developer help
1

I’m learning howto make themes for Ghost and I’ve stumbled upon issue I can’t figure out.
How do you make top navigation bar? In the docs I found {{navigation}} handlebar but when I try to loop through it I get an empty response. If I use {{navigation}} somewhere in the body it returns a whole block of links suitable for footer, not top navbar.
So I found {{@site.navigation}}. It gets me the labels, but I can’t get url.
How do you do it in Ghost? I spent quite a while digging the docs and trying to make it, but at this point I have no clue.

Here’s the code I got so far:

  		<div class="navbar-menu is-white">
  			{{#foreach @site.navigation}}
  			<a href="{{url absolute="true"}}" class="navbar-item">{{label}}</a>
  			{{/foreach}}

  		</div>
2

By default, Ghost uses a basic template for the {{navigation}} helper.

If you want to customise it, you need to make your own navigation.hbs file in the partials folder and loop through using {{#foreach navigation}}.

If you try and loop through manually in any other file than navigation.hbs then it will not work as you have seen!

These docs were really helpful for me when learning about it.

Hope this helps :slightly_smiling_face:

1 Like
3

ok, I figured it out. This one works:

				<div class="navbar-menu is-white">
					{{#foreach @site.navigation}}
					<a href="{{this.url}}" class="navbar-item">{{label}}</a>
					{{/foreach}}

				</div>

So when using @site.navigation you need to put this.url instead - which actually makes sense :slight_smile: .
For me the docs were not really helpful in figuring this out. And yeah I’ve noticed that you can (but don’t have to) create a partial hbs file. But this hasn’t helped as I needed it to be formatted quite differently, without using html lists.

4

If you make the navigation.hbs partial you can style it however you want. It just provides a way to loop through whatever is set in Ghost Admin.

The @site.navigation notation is used to check if any navigation links have been set. Such as whether to display a hand burger menu system on mobile.

I wouldn’t use it to loop through as its not the recommended approach.

5

ok, maybe - but that’s the approach that worked for me. I couldn’t work it out with navigation.hbs.
I know I can have a partial navigation.hbs - but wouldn’t I have to make it the same as the code above, that works?
As mentioned I need to get it structured as a set of anchortags, not HTML list.
What would you consider a correct code?

6

hi, I am having a problem where on my localhost creating the partials/navigation.hbs file worked fine, but when I installed the same template on a live ghost site, it was ignored, the navigation went back to default markup

do you have any pointer on how to tackle this