---
title: "3rd Level Navigation"
description: "The Third Level Navigation Component can be used to offer an additional Navigation on a Page."
path: https://www.eonshowroom.eon.com/en/page-elements/3rd-level-navigation.html
lastModified: 2025-12-15T10:02:52.275Z
---

# 3rd Level Navigation

# Third Level Navigation

[How to Configure](#how-to)

Learn more on how to create a Navigation that consists of Meta, Toolbar, and Main Navigation, which can be maintained to build a full Navigation:

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1040970776-2%3A16-9?fmt=webp)

## Navigation Experience Fragment Traning Video

[Watch the Video](https://vimeo.com/1130653316/cbd4a741ac)

### Description

The Third Level Navigation Component can be used to offer an additional Navigation on a Page.

- It can be added on a per Page Basis
- It is based on Experience Fragment
- Only one on a single Page
- Active Page is getting highlighted

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

### Inspirations

### Usage Rules & Features

##### Features

- Based on Experience Fragment
- Addable on a per Page Basis

##### Properties

- Can be be made sticky
- Button or Link can be added
- Muliple Entries are addable

##### Design

- Active Page is getting highlighted
- Its appearance is depending on the Variation for the Page Knot

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

**Never put a Third Level Navigation in a Grid !**Third Level Navigation is created as Experience Fragment and added in it's own Content Slot above Hero Component Area.

##### DO's

- Add at least 2 and maximal 7 Entries

##### DONT's

- Do not add more than one Third Level Navigation per Page

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

### Create Experience Fragment

At first, Editor needs to create an Experience Fragment in Experience Fragments Part.

[Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html)

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

### Add Third Level Navigation

In the created Experience Fragment, Editor needs to add and maintain the Third Level Navigation Component.

Ensure to create Variations for each Language Version of the Page it should be used on.

#### Keep in Mind

The Paths of Language Version need to be the Language Shortening, eg. *"en"* for *"english"*, or *"de"* for *"german"*. Therefore, Name the Language Versions only with the correct Language Shortening.

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

### Configure Navigation Entries

In Navigation Entries Tab, Editor need to add Text, Title, and URL for each Entry. Furthermore, open in new Window can be configured per Item.

#### Keep in Mind

Please add at least 2 and maximal 7 Entries.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/third-level-03%3A4-3?fmt=webp)

### Style Navigation

In CTA & Style Tab, Editor can choose Color Scheme, activate sticky Behaviour, and decides weather to have Button, Link, or no CTA.

If a CTA should be Part of Third Level Navigation, Editor needs to decide, whether to show it on Mobile or not. Furthermore, Label and Link URL are needed. Optional, Editor can select an Icon and decides whether to open the Link in new Window.

#### Keep in Mind

To get more / other Icons on your Icon List, just use FoundationNG Third Level Nav Icons Config.

[Read more about FoundationNG Third Level Nav Icons Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-third-level-navigation-icon-config.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/third-level-04a%3A3-4?fmt=webp)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/third-level-04b%3A3-4?fmt=webp)

### Add Third Level Navigation on Page

In Top of each Page under Press and Event Details Component, Editor can open Dialog of Third Level Nav - Experience Fragment Component. In this Dialog the Path of the Master of the created Experience Fragment for Third Level Navigation needs to be selected. Then, it shows correct Language Version automatically.

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

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