---
title: Jump Links
tags: Navigation
---

# Navigation: Jump Links
###### **Control Code:** `N.JL`
<!--
-->
## About This Component

Jump links provide a clear, scannable navigation element to allow users to anchor down to content located lower on a page.
<!--
### Usage Guidelines

:::info
*TODO: Novartis to write.*
:::

General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component.

### Related Components

:::info
*TODO: Novartis to write.*
:::

A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component.

- **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one.
- **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one.

### Accessibility

:::info
*TODO: Novartis to write.*
:::

Specific accessibility considerations and recommendations for this component.
-->
## Primary Configurations

| **Extra Large Breakpoint (Desktop)** |
| -------- |
|  |

| **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- |
|  |  |

| **Key** |
| ------- |
|  |

Each configuration here is repeated for each of the links included in the component, up to a maximum of 12 links.

- **Number of Links:** 1-12

### 1. Link

- **Required:** Must be included
- **Type Style:**
- Tab is active: Jumplink 1
- Tab is inactive: Jumplink 2
- **Color:**
- Tab is active: PRIMARY_01 (Brand Primary), changeable within site color palette
- Tab is inactive: NEUTRAL_70 (Dark Gray), changeable within site color palette
- **Link Target:** Choose the location on the page below this Jump Link component that the link should scroll the user to

## Resources

### CMS Instructions

#### Jump Links Configuration

While creating or editing content, site administrators and content editors can add **Jump Links** to the page as follows:

**Step 1:** Navigate to the **Content** menu and either click **Add content** to create a new content or click the **Edit** button under Operations for the content you wish to edit:


On the **Layout** tab, click **Add section** and select **Jump Links** in the **Choose layout** pane:


Specify administrative label for the section and click **Add section**:


**Step 2:** On the **Layout** tab, click **Add block** at the jump link section created in the previous step.


In the side panel on the right-hand side of the window click **Create custom block**.


Select **Jump Link** from the list of available custom blocks.


**Step 3:** Displayed is the window with the jump link properties:


Mandatory entries include:

- **Title** - The title of the block as shown to the user.
- **Display title** - checkbox
- **Title** - text of the link, up to 50 characters
- **Jump link ID** - ancor value, no spaces are allowed
- **Link Color** - select from drop-down
- **Hover Color** - select from drop-down

Optional entries include:

- **Reusable** - checkbox. Would you like to be able to reuse this block? This option can not be changed after saving. If this option is selected, the you will be able to select this block from the list (see **Step 1**).

**Step 4:** Fill in the fields as required. For example:

- **Title** - "Jump Link"
- **Display title** - check
- **Text** - "Jump Link"
- **Jump link ID** - "jump-link-01"

**Step 4:** Be sure to click the **Add block** button to ensure that your changes are updated.


**Step 5:** The layout tab displays the parameters of the added block. Click the edit icon the edit the block layout.


**Step 6:** Add other blocks to the section below or above the jump link block. Place the jump link block in the place where you need the jump link lead you to. Add other jump links to the section if required.

**Step 7:** Click the **Save layout** button


On the **Edit** tab for the content, make sure that the **Published** checkbox is selected and click **Save**.


**Step 8:** Open the content page using the **URL alias** for the page. URL alias is displayed on the **Edit** tab for the content, refer to the [flexible template CMS instructions](/k-R9oJNzSJG_F4x3P7gIug#CMS-Instructions) for details.


View the updates.