---
title: "Breadcrumb"
description: "The Bread­crumb Component can be used as Secondary Navigation."
path: https://www.eonshowroom.eon.com/en/page-elements/breadcrumb.html
lastModified: 2024-12-03T15:35:02.234Z
---

# Breadcrumb

# Bread­crumb

[How to Configure](#how-to)

### Description

The Breadcrumb Component can be used as Secondary Navigation.

- By Default it starts from second Level of Page Hierarchy
- It is possible to hide a Page in the Navigation
- For better SEO the original Page Name is linked (not Vanity URL)

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

### Inspirations

### Usage Rules & Features

##### Features

- By Default it starts from second Level of Page Hierarchy, but it is possible to let it start from any other Level in the Content Tree
- For better SEO the original Page Name is linked (not Vanity URL)

##### Properties

- It should only be added via Page Template
- It can be configured on a per Page Basis via Configuration Page

##### Design

- It is possible to hide a Page in the Navigation.
- Last Item (the current Page) is not a Link, while all others are Links
- On Mobile Viewports the Breadcrumb Navigation Trail is shortened automatically
- Two different Sizes are available: Small and Large

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

**Never put a Breadcrumb in a Grid !**Breadcrumb is created by AEM and added in it's own Content Slot via Page Template.

##### DO's

- Use Breadcrumbs for Websites with at least 2 Levels of Hieearchie

##### DONT's

- Don't use it for small Projects

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

![Breadcrumb Component in Page Template](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/breadcrumb_edit-pagetemplate%3A2-1?fmt=webp)

![Open Page Template](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/breadcrumb_open-template%3A3-4?fmt=webp)

### Add a Breadcrumb Navigation

Breadcrumb should be added in the Page Template. This makes it appear consistantly in same Place on all Pages starting from second Level of Hierarchy.

![Hiding Options in Page Properties](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/breadcrumb_page-properties%3A1-1?fmt=webp)

### Hide on per Page Basis

In the Page Properties of a Page, Editor can activate a Checkbox to hide the Breadcrumb Navigation on this specific Page.

Moreover, Editor can activate to hide this Page in Navigation. Then, this Page will not be visible in Breadcrumb Navigation.

![Configure Breadcrumb on Configuration Page](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/foundation-ng_enable-breadcrumb-new%3A2-1?fmt=webp)

### Configuration Page

Breadcrumb is preconfigured to start from the second Level in the Content Tree. But Editor can change it to start from another Level using Configuration Page for it.

Editor can also choose to hide the current Page or to show also hidden Pages in the Breadcrumb Navigation by using this Configuration Page. It is also possible to choose to not include it from here on.

Beside that, small (14px Font Size), or large (20px Font Size) Size can be choosen.

Furthermore, to track Breadcrumb Usage, Enable Breadcrumb Tracking must be activated.

[Read more about Configuration Pages](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html)

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

**Hint:**

Size Option will not affect Breadcrumb for E.ON Legacy Design. This is only effective when using Brand Evolution Styles. Therefore, if using E.ON Legacy Design, please keep Default (Small) Size.