Navigation

Ghost supports the creation of static pages, however to add your static pages to a navigation menu, you’ll have to edit your theme’s HTML files. This guide will walk you through how to edit your theme’s navigation menu. If you’re not sure how to create a static page, read our full instructions here on how to publish static pages.

Locate your theme’s navigation menu

To begin, you’ll need to first locate your theme’s navigation menu. Several theme creators will include files such as, nav.hbs, navigation.hbs, menu.hbs, etc in the partial directory of a theme – while others will include the navigation menu directly in the default.hbs file. It’s important to read through the documentation of your theme to locate the portion of code you’ll need to edit.

NoteFor this example, we’ll be working with the navigation contained in “Incorporated,” a free theme available in the Ghost Marketplace.

In this particular theme, the navigation file we’ll be working with is located at in the partialsdirectory, and is called menu.hbs. The code should look similar to this:

<a href="/about">About</a>
<!-- <a href="/">Blog</a> -->
<!-- <a href="/">Product</a> -->

You’ll notice that the creator of this theme has already placed in a few links within the file to use as examples to get you started.

Find your static page’s URL

To add the link to your navigation menu, you will need to find the URL assigned to your static page. If you’re not sure what the URL is, you can access the page from your blog admin area, and click on the “gear” icon, to view your Post Settings.

Next you will need to add some anchor tags to link out to the static pages. Let’s say, for example, I’ve got an “About Me” and a “Contact” page that I want to include in my navigation menu. For my current theme, I would edit the code by changing the href in the <a> tag to match my static page’s URL, like so:

<a href="/about-me">About Me</a>
<a href="/contact">Contact</a>
<a href="/">Blog</a>

Save and upload your theme

Once you’ve added your static page links to your navigation menu, you’ll want to save the file, and then re-upload your theme to your blog. Once uploaded, your navigation menu changes should appear immediately.

Using Ghost(Pro)?
To upload your theme, you’ll need to access your blog’s settings on Ghost.org. If you need help, checkout How to upload a theme to your Ghost(Pro) blog or contact us at [email protected] for additional Ghost(Pro) support.