# Add links to your header and footer

_Category: Design and templates_

Add links to your header and footer so readers can reach your main website, your status page or your contact page from anywhere in your help center. You keep them in one list, and your header menu and footer share it.

**Who can do this:** Owners and Admins (Editors through **Customize** on your help center) · **Plans:** All plans

## Add a link

1. In the left menu, click **Template editor**, then open the **Navigation** tab.
2. Click **Add link**. A link called "New link" appears at the end of the list.
3. Type a **Label**: the text readers see.
4. Enter the **URL**: a path on your help center that starts with `/`, such as `/categories`, or a full address that starts with `https://`.
5. Pick a **Kind**: **Internal link**, **Category** or **External link**.

![Screen recording. In Navigation, click Add link. Give it a Label and a URL. Set Kind to External link. The link shows at the bottom of the header, on every page.](https://helpcenter-io.s3.amazonaws.com/uploads/self/EIQgHBOePJMvVwbJYZZN2gV8twkgKVLD1PYVvlsU.gif)
In Compass, the new link appears on a row of its own at the bottom of the header.

1. Check the link in the preview, then click **Publish**. Readers see it once you publish.

Does the tab say **These links don't show anywhere yet**? Your header has no place for them yet, and one click fixes it: see *Show your links in the header* below.

## Where your links appear

Your links show wherever a page has a **Navigation** block, and in a **Footer** without columns of its own, which lists them in a "Links" column.

- In Compass, the theme new help centers start with, the header of every page ends with a Navigation block. Your links appear there, on a row of their own. Compass's footer has columns of its own, so they don't show in it.
- In most other themes, they show in the header and in the footer.
- **Contact links** (anything that points to `/contacts`) stay hidden while your contact page is off. The page switches on when your contact form has a recipient email.

A link to a private category doesn't make it public: readers who can't see the category still can't open it.

## Show your links in the header

When no page has a place for your links, the **Navigation** tab says so: **Links you add here won't show yet** while the list is empty, and **These links don't show anywhere yet** once it has links. It happens on a help center that started on Compass before its header had a Navigation block, or after the Navigation blocks were removed.

1. In the **Navigation** tab, click **Add to header**. A Navigation block is added to the end of every page's header, and you see **Added to your header**.
2. Check your links in the preview, then click **Publish**.

![Screen recording. The Navigation tab says the links don't show anywhere yet. Click Add to header. They now show in the header of every page. Change how it looks opens the block's Position and Variant.](https://helpcenter-io.s3.amazonaws.com/uploads/self/96IzKwH0YEfUqfJmnL1rEXCcLP4UuFDuImXcWLs3.gif)
One click puts your links in the header of every page.

Changed your mind? Press ⌘Z (Ctrl+Z on Windows): one undo takes the block back out of every page.

If your links show on some pages but not others, the tab says **Not shown on every page** and names the pages that miss out. **Add to header** then adds the block to those pages, or to every page if your header is the same on every page.

### Change how the menu looks

Click **Change how it looks** in the **Added to your header** message to open the block's settings. To find them later, open **Pages**, pick the **Header** region and click **Navigation**.

- **Position**: **Own row (block)** gives the links a full-width row of their own. The inline positions (left, center or right) put them on one row with the components beside them. In Compass, keep **Own row (block)**: inline, the links share a row with your logo, which can squeeze it on a phone.
- **Variant**: **Horizontal**, **Vertical (sidebar)** or **Pills**.

The block shows the list from the Navigation tab, not links of its own. Its settings say how many links it shows, and **Edit links** takes you back to the tab. In Compass each page has its own header, so a change to the block applies to one page, as the label next to its name says (for example **Home only**). Make the same change on each page where you want it. See [Pages, regions and shared headers explained](https://self.helpcenter.io/content/pages-and-regions).

## Which kind to pick

| Kind | Use it for |
| --- | --- |
| **Internal link** | A page of your help center, such as `/categories` (all topics) or `/contacts` (your contact page). |
| **Category** | One of your categories. Open the category on your help center and copy the part of its address after your domain, for example `/category/12-billing`. |
| **External link** | Another website, such as your product or your status page. In your header menu it opens in a new tab. |

The easiest way to get an internal path right is to open the page on your live help center and copy what comes after the domain in the address bar. On a help center with several languages, paths that start with `/` keep the reader's language automatically.

## Reorder, edit or remove links

- Use the up and down arrows on a link to change its place in the list. Your menu shows the links in this order.
- Edit any field in place. Changes show in the preview right away.
- Click the trash icon to remove a link. Changed your mind? Press ⌘Z (Ctrl+Z on Windows).

## Translate link labels

On a help center with more than one language, the Navigation tab shows an **Editing texts in** bar. Pick a language, then type the translated **Label** for each link. The URL is shared by every language.

## Style one link with a CSS class

Want your "Contact support" link to look like a button? Type a class name in **CSS class (advanced)**, such as `support-cta`, without a leading period. The class is added to that link in your header menu, so you can target it from **Advanced** → **Custom CSS**. The [Custom CSS reference](https://self.helpcenter.io/content/custom-css-reference) has a ready-made example.

## Troubleshooting

**Your link doesn't show in the header.** Your header has no Navigation block. If the page shows your links nowhere else either, the **Navigation** tab tells you, and its **Add to header** button adds one: see *Show your links in the header* above. A footer that lists your links counts as showing them, so then the tab says nothing. To add one by hand, open **Pages**, pick the **Header** region, click **Add component** and pick **Navigation**, then publish. In Compass, set its **Position** to **Own row (block)**, and add it on every page where you want the menu: each page has its own header.

**Your links show twice.** The header has two Navigation blocks. It happens when you add one to a Compass header that already ends with one, and the block's settings warn you about it. Open one of the two in **Pages** → **Header**, click **Delete** and confirm with **Remove**, then publish.

**Your link doesn't show in the footer.** Your Footer uses its own columns (Compass's does). Add the link to a Links column in the Footer. See [Customize the header and footer](https://self.helpcenter.io/content/header-and-footer).

**The Contact link disappeared.** Your contact page is off. Add a recipient email to your contact form and publish. See [Set up your contact page and form](https://self.helpcenter.io/content/contact-form).

**The link leads to a "not found" page.** Check the URL. Internal paths start with `/` and must match an address on your help center; copy it from your browser's address bar.

**The preview is right but your help center isn't.** Click **Publish**. Saved changes stay in your draft until you do.

## Related articles

- [Customize the header and footer](https://self.helpcenter.io/content/header-and-footer)
- [Pages, regions and shared headers explained](https://self.helpcenter.io/content/pages-and-regions)
- [Set up your contact page and form](https://self.helpcenter.io/content/contact-form)
- [Add, move and remove components](https://self.helpcenter.io/content/components)
- [Custom CSS reference: selectors and examples](https://self.helpcenter.io/content/custom-css-reference)