In Ghost version 0.5.9, a navigation feature was introduced. The navigation feature allows you to set a navigation through the Ghost admin interface; no need to code the menu in your theme anymore!You should place the example code in a navigation.hbs partial template, in the partials folder of your theme. Then in your theme, use the {{navigation}} helper where you want your navigation to be outputted.

You can currently only have one navigation, so if you want to use the navigation feature, you probably will want to make it your primary / main navigation. The navigation feature also doesn’t support dropdowns, so if you want a dropdown, you can manually add it before or after the foreach statement.

Nav Tabs

To use navigation tags, the code for Ghost is:

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

The output:

Nav Pills

To use navigation pills, the code for Ghost is:

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

The output:

Stacked Nav Pills

To use stacked navigation pills, the code for Ghost is:

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

The output:

Navbar

The following code examples should be placed inbetween the .navbar-collapse``div class.

<header class="navbar navbar-default navbar-static-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{{@blog.url}}/">{{@blog.title}}</a>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
        <!-- place code here -->
    </nav>
  </div>
</header>

To have the navbar on the left side, use the following code:

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

To have the navbar on the right side, use the following code:

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

If you want a left and right sided navbar menu, you have to choose one side to be the primary menu in which will use the above code; the other left you will have to manually code.

Conclusion

So, you can see that creating Bootstrap navigations for Ghost is simple and easy.

You can add classes to the <ul> and <li> tags if you wish to further customize the navigation.

Have fun!