Docs
Thesis
Navigation

Navigation

With Ghost you can add, edit and reorder navigation items. This guide will show you how to create and manage navigation items in your Ghost site.

Thesis navigations

The Thesis support Primary and Secondary navigation.

  • Primary navigation is displayed in the sidebar
  • Secondary navigation is displayed under the hamburger button (3-dots icon).

Manage navigation items

To manage navigation items, follow these steps:

  1. Go to Settings → Site → Navigation
  2. Click Customize

Ghost navigation settings

Sections

Thesis allows you to add sections with labels between navigation items. This is useful to separate different items to sections.

Thesis theme navigation section

To add the section, create a new item with label starting with - and label. This item will be recognized as a separator.

Navigation section setting

Separators

Thesis allows you to add a separator between navigation items. This is useful to separate different sections of your navigation.

Thesis theme navigation separator

To add the separator, create a new item with label --- and this item will be recognized as a separator.

Navigation separator setting

Item icons

Thesis theme comes with a set of icons for the navigation items. The predefined set is a little bit limited, but you can add your own icons to the navigation items.

Thesis theme navigation icons

Default icons

By default provided icons for the links in menu with these slugs:

  • home
  • blog, news, archive, collection
  • about
  • contact
  • authors, members
  • categories, tags
  • membership, pricing, plans
  • signin, sign-in, login, log-in
  • subscribe, join, signup, sign-up, register, registration
  • account
  • recommendations
  • faq

Custom icons

Code Injection is required to add custom JS.

There is an API to add icons to nav items. It will require from you to provide a menu label and SVG icon. You can use the following code snippet to add an icon to the page with label Cart:

<script>
window.pvs && pvs.addNavIcon(
    'Cart',
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>'
);
</script>

p.s. you can use FontAwesome icons https://fontawesome.com/ (opens in a new tab) or any other SVG icons you like.

LogosComments