Navigation

This guide will walk you through how to include the navigation items added directly from the Ghost admin panel (Settings > Navigation), using the {{navigation}} helper.

The default theme, Casper, already supports the built-in navigation feature, however if your theme does not support the built-in functionality, you will need to follow the steps below.

Creating the navigation.hbs file

To begin, using an HTML/Text editor, create a new file within the partials directory of your theme, and save it as navigation.hbs. This file should contain the following code:

<div>
    <ul class="nav">
        <!-- Loop through the navigation items -->
        {{#foreach navigation}}
        <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
<a href="{{url absolute="true"}}">{{label}}</a></li> {{/foreach}} <!-- End the loop --> </ul> </div>

The above code loops through the navigation items defined in your settings, and wraps them in HTML. You can customize the HTML used within this file to fit the needs of your theme. 

Using the {{navigation}} helper to output your menu

The {{navigation}} helper outputs the formatted HTML of menu items defined in the Ghost admin panel (Settings > Navigation). To display the navigation menu, you will need to place the helper within your theme files, wherever you'd like the menu to appear.

For example, in Casper, the {{navigation}} helper is included on the default.hbs file (here). This allows the navigation menu to be included on every template within the theme.

Save and upload your theme

Once you've added your navigation.hbs file, and included the {{navigation}} helper where you'd like the navigation menu to display, you will need to save your theme files, and upload the theme to your publication.

Adding menu items to your navigation

To add menu items to your navigation, you will need to access the navigation settings from the Ghost admin panel (Settings > Navigation).

Screen_Shot_2017-04-13_at_9.16.17_AM.png

From the navigation settings, set menu items by clicking within the label field and entering text to appear as an item within the menu. In the field directly to the right of the label, enter the path the menu item should hyperlink to. 

Screen_Shot_2017-04-13_at_9.19.43_AM.png

 To add more menu items, click the green "+" icon. To remove menu items, click the trashcan icon.