> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/crimson/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/crimson/navigation/primary-navigation.md).

# Primary Navigation

### What is Primary Navigation in Crimson?

**Primary Navigation** is the **main menu bar** in your header — usually the set of links visitors expect everywhere (Home, About, Contact, etc.). Crimson uses Ghost’s built-in **Primary** navigation section for this menu.

<figure><img src="/files/00epdCoL3IlCQxLkYmW1" alt=""><figcaption><p>Primary Navigation</p></figcaption></figure>

#### Where to edit it in Ghost Admin

1. Go to **Ghost Admin → Settings → Navigation**
2. Click the **Customize** link which will open a Navigation popup
3. Click **Primary** tab
4. Add, update, delete, or reorder menu items
5. Click **Save** to save the navigation menu

<figure><img src="/files/ZxlAkXEdwpmRS2q0pMHI" alt=""><figcaption><p>Navigation Settings</p></figcaption></figure>

<figure><img src="/files/kAIaMmxIijPs8lxSfA0V" alt=""><figcaption><p>Primary Navigation</p></figcaption></figure>

#### How to add a menu item

Each nav item has:

* **Label** (text shown in the menu)
* **URL** (where it links)

**To add a page you created in Ghost**\
Ghost does *not* automatically add new pages to navigation. You need to:

1. Open your published page
2. Copy the URL
3. Paste it into a new navigation item under **Settings → Navigation**

**Tip: Add tag/category links easily**\
Ghost tags automatically have archive URLs like:

* `/tag/news/`
* `/tag/podcast/`

\
You can use these as “Categories” links in your navigation.

***

### Creating dropdown menus

Crimson supports dropdown navigation. The easiest way to build a dropdown is:

1. Add a **parent** item and set its **URL to `#`**
2. Add **child** items whose **labels start with `-`** (dash)

**Example (Primary dropdown)**

* **Custom Pages** → `#`
* **-**&#x41;ccount → `/account/`
* **-**&#x54;ags → `/tags/`
* **-**&#x41;rchive → `/archive/`

<figure><img src="/files/7qi6cyx0QDfqfrr1SJId" alt=""><figcaption><p>Dropdown Settings in Primary Navigation</p></figcaption></figure>

This will render “Custom Pages” as a dropdown with the child links beneath it.

<figure><img src="/files/ioKSz5aoS3SsLYCW8SsN" alt=""><figcaption><p>Dropdown Rendered in Primary Navigation</p></figcaption></figure>

{% hint style="danger" %}

#### Important dropdown warning

In Crimson, **the very last menu item cannot be a dropdown parent that links to `#`**, or the navigation may fail to render.

If your last item must be a dropdown parent, add one normal link after it.

**In Short: There should not be an empty dropdown parent without any dropdown children under it.**
{% endhint %}

#### Primary Navigation best practices

1. Keep it **simple**: aim for **4–6 main links**
2. Use it for “always-needed” pages: Home, About, Services, Contact, Membership
3. Avoid stuffing categories here (put categories into Secondary navigation instead)

#### How it behaves on mobile

On smaller screens, **Primary navigation becomes the hamburger menu**, while Secondary navigation scrolls horizontally.

<figure><img src="/files/vDeqgDQBYc1v7Z8oBJoK" alt="" width="375"><figcaption><p>Primary Navigation on Mobile device</p></figcaption></figure>

***

### Troubleshooting

<details>

<summary>My dropdown doesn’t appear or appears broken</summary>

* Confirm the parent URL is exactly `#`
* Confirm children labels start with `-`
* Confirm your last nav item is *not* a parent linking to `#`

</details>

<details>

<summary>My menu link goes to a 404</summary>

* Make sure the page is **published** and is accessible using it's direct link
* Make sure the URL includes the correct path

</details>