How to Add a Menu to Your Ghost Blog


Many themes have menu's built in, but this will show you how to add in your own navigation using content from the Ghost admin.

  1. Open up your default.hbs inside of a text editor (using default.hbs because we want the navigation on every page)
  2. Insert the following into where you want the navigation to show up (usually the first thing inside <body>)

  3. Now, this is going to use the default navigation code which looks like this:

    <!-- Default navigation template html -->
    <ul class="nav">
        <li class="nav-home nav-current"><a href="/">Home</a></li>
        <li class="nav-about"><a href="/about">About</a></li>
        <li class="nav-contact"><a href="/contact">Contact</a></li>
    </ul>
    

    Default Menu

  4. If you would like to change this, create a navigation.hbs file inside the partials folder of your theme and add in the code you would like to use.

Now that your menu is added and customizable using the Ghost admin, any styling or changing is up to you :).

3. Now, this is going to use the default navigation code which looks like this: ![Default Menu](/content/images/2015/11/Screen-Shot-2015-11-14-at-8-39-25-AM.png) 4. If you would like to change this, create a `navigation.hbs` file inside the partials folder of your theme and add in the code you would like to use. ![](/content/images/2015/11/Screen-Shot-2015-11-14-at-8-40-10-AM.png) Now that your menu is added and customizable using the Ghost admin, any styling or changing is up to you :).