Using Ghost's Navigation Feature

As of Ghost 0.5.9, Ghost now has a built in Navigation handler and admin. This allows you to be able to edit and change your navigation without needing to edit your theme files. This is a huge upgrade for theme developers as well as end users of those themes. Before, the theme developers had to provide instructions on how to edit their built in navigation but now, they can just use the Ghost helper, and let the users update it however they want from the back end.

The first step to adding navigation is to either add in the navigation helper, or change your current theme to use the new helper.

Add Navigation Helper to Your Theme

The navigation helper is added to your theme by just adding {{navigation}} where you want the navigation bar to show up in your default.hbs file. Here is the default HTML that is outputted with the navigation helper:

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

As you can see, it is just an unordered list. You can use the default 'nav' class to style this navigation menu however you wish.

You can also change the whole HTML structure of the navigation if you would like. To do this, just create a navigation.hbs file inside your theme's partials folder (/your-theme/partials/navigation.hbs). For more information on this, check out the offical Ghost docs on the navigation helper.

Editing the Navigation Menu

Once the navigation helper has been added to your theme, or you have a theme with it already included, you can edit your navigation menu from the Ghost admin ( Once in the admin, click on 'Settings' and then 'Navigation'.

Navigation 1

Once here, you will notice that there will be a default 'Home' navigation. You can remove any navigation items that you want by using the trash icon to the right of the item. You can add new items by just typing them in, and can change the order by clicking on the icon on the left and dragging it to the spot you want.

Navigation 2

Navigation 4

Navigation Gif

The navigation feature should simplify one of the major sticking points of creating and using themes. It will most likely be a while till all themes will be using the navigation helper, but it should be used from here forward.

Hope that helps! Let us know if you have any questions in the comments below.