---
title: "Anchor Navigation"
description: "The Anchor Navigation Component can be used to provide an optional Navigation e.g for better Orientation on very long Pages."
path: https://www.eonshowroom.eon.com/en/page-elements/anchor-navigation.html
lastModified: 2025-05-20T13:35:13.864Z
---

# Anchor Navigation

# Anchor Navigation

An Example of an Anchor Navigation can be seen left Side of this Page.

[How to Configure](#how-to)

### Description

The Anchor Navigation Component can be used to provide an optional Navigation e.g for better Orientation on very long Pages.

- Links are connected to Section ID and Anchor Name of each Section on the Page
- Helping Users to navigate on long Pages

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/navigation-anchor-navigation--interactive)

### Usage Rules & Features

##### Features

- Links are connected to Section ID and Anchor Name of each Section on the Page

##### Properties

- Enabled / Disabled via Page Properties

##### Design

- It will appear on left Side of the Screen on a Page
- Design differs per Viewport

##### In which Grid Columns does it fit?

**Never put a Anchor Navigation in a Grid !**Anchor Navigation is created as Experience Fragment and added via Page Properties.

##### DO's

- Add a minimum of 4 and maximum of 7 Items
- Enable Placeholder Box for lazy loading Images on Multibrand Main Config CAC to ensure correct Position for Anchor Links
- If Section should appear in Anchor Navigation, add Section ID and Anchor Text

##### DONT's

- Do not add more than 25 Characters per Item to have it in one Line
- Do not add special Cases to Section ID, as it must be enter a valid HTML5 ID - So, it should only contain Letters, Numbers, Dashes, and Underscore and should start with a Lower Case Letter

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/anchor-01%3A1-1?fmt=webp)

### Activate Anchor Navigation

In Page Properties of the Page whereas an Anchor Navigation should be used, the Anchor Navigation needs to be enabled. If it is activated, Anchor Navigation gets visible on the Page, but is never visible in Editor View.

Furthermore, Tracking can be activated here.

![Add Section ID and Anchor Text](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/anchor-02%3A3-4?fmt=webp)

### Add Section ID and Anchor Text

In the Anchor Navigation the Anchor Text of the Section is used to get displayed as Link Name of the specific Anchor. Therefore, Editor needs to add Section ID first.

Then, Checkbox for making it appear in Anchor Navigation needs to be activated. This enables the Editor to enter Anchor Text of the Sections, which is then linked in Anchor Navigation.

#### Keep in Mind

- Please enter a valid HTML5 ID as Section ID. It should only contain Letters, Numbers, Dashes, and Underscore and should start with a Lower Case Letter.
- If no Section ID and / or no Anchor Text is provided in the Section, this Section can not get displayed in Anchor Navigation.