---
title: "Essentials Navigation"
description: "Feed Ghost theme sidebar navigation with dropdowns, section labels and separators, plus icons for slugs like home or contact and custom SVG icons."
url: "https://www.priority.vision/docs/feed/essentials-navigation"
scope: theme
appliesTo: [Feed]
lastUpdated: 2026-09-23
---

# 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.

![Feed navigations](https://www.priority.vision/images/docs/feed/navigation.png)

The Feed support Primary and Secondary navigation.

- **Primary** navigation is displayed in the sidebar
- **Secondary** navigation is displayed in the sidebar footer.

## Manage navigation items

To manage navigation items, follow these steps:

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

![Ghost navigation settings](https://www.priority.vision/images/docs/common/navigation.png)

## Dropdowns

Our theme support dropdown menus in navigation, allowing you to organize related links under a parent item. This is useful for creating more complex navigation structures without cluttering the menu.

![Feed theme navigation dropdown](https://www.priority.vision/images/docs/feed/navigation-dropdown.png)

To create a dropdown menu:

1. Add a parent item that will serve as the dropdown trigger
2. Add child items by creating navigation items with labels that start with `- ` (dash followed by a space)

The items with labels starting with `- ` will be nested under the previous regular navigation item.

![Navigation dropdown settings](https://www.priority.vision/images/docs/common/navigation-dropdown-settings.png)

For example, to create a "Resources" dropdown with "Tutorials" and "Documentation" items:

1. Add a regular navigation item with label "Resources"
2. Add an item with label "- Tutorials" 
3. Add an item with label "- Documentation"

This will create a dropdown menu where "Tutorials" and "Documentation" appear when hovering over or clicking on "Resources".

## Sections

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

![Feed theme navigation section](https://www.priority.vision/images/docs/feed/navigation-section.png)

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](https://www.priority.vision/images/docs/common/navigation-section-settings.png)

## Separators

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

![Feed theme navigation separator](https://www.priority.vision/images/docs/feed/navigation-separator.png)

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

![Navigation separator setting](https://www.priority.vision/images/docs/common/navigation-separator-settings.png)

## Item icons

Feed 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.

### 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](/docs/guides/custom-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`:

```html
<script>
window.pvs?.addNavIcon?.(
    'Cart',
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="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>
```

We recommend using popular icon libraries. Here are some tested and recommended options, though you can choose any library you prefer:

| Library                                             | License                                             |
|-----------------------------------------------------|-----------------------------------------------------|
| [Lucide](https://lucide.dev/)                       | ISC License                                         |
| [FontAwesome](https://fontawesome.com/)             | Free: CC BY 4.0 (icons), MIT (code)                 |
| [Bootstrap](https://icons.getbootstrap.com/)        | MIT License                                         |
| [Hero Icons](https://heroicons.com/)                | MIT License                                         |
| [Tabler Icons](https://tabler.io/icons)             | MIT License                                         |
| [Phosphor Icons](https://phosphoricons.com/)        | MIT License                                         |
| [Iconoir](https://iconoir.com/)                     | MIT License                                         |
| [Remix Icon](https://remixicon.com/)                | Apache License 2.0                                  |
| [Untitled](https://www.untitledui.com/free-icons)   | Custom license (free for commercial projects up to 5 users) |
| [Hugeicons](https://hugeicons.com/)                 | Commercial, Free for personal & open source projects |

## Documentation Index
> Fetch the complete documentation index at: https://www.priority.vision/docs/feed/llms.txt
> Use this file to discover all available pages before exploring further.