Add links and breadcrumbs

Abstract

Use links and breadcrumbs to improve site navigation.

The Link, Link list, and Breadcrumb renderings are part of the navigation section. They help your visitors to navigate your site.

A breadcrumb is a navigation help that reveals the user’s location in a website. Especially, if your website contains a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. Breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages.

In their simplest form, breadcrumbs are horizontally arranged text links separated by the greater than symbol (>); the symbol indicates the level of that page relative to the page links beside it.

If you want the user to be able to use the breadcrumb for navigation:

Breadcrumb navigation

The Breadcrumb rendering generates a breadcrumb that lists all path items from the root to the current item. It supports rendering variants.

To add the Breadcrumb rendering to the page:

  1. In the Experience Editor, from the toolbox, in the Navigation group, click Breadcrumb and drag it to the page.

  2. To set the breadcrumb properties, click 7190D2F15CB74E52802605F433CA1C49.pngEdit style and behavior.

  3. In the dialog box, in the Styling section, you can select a variant and style.

  4. In the Breadcrumb Settings section, set the following fields:

    • Start Page – specify the starting point for the breadcrumb. If you leave this empty, by default the home page is used.

    • Separator – specify the character that separates the breadcrumb items. For example, >, >>, /, //.

    • Navigation Breadcrumb – select to include siblings as a drop-down menu.

    • Navigation Filter – select Breadcrumb Navigation.

By changing the settings, you can create different styles of breadcrumbs. For example:

Type

Screenshot

Settings

Simple breadcrumb

Simple breadcrumb example

Rendering variant: Page title

Separator: >

Navigation Filter: Breadcrumb Navigation

Styles: Indent Top, Indent Bottom, Indent Sides

Breadcrumb with ellipses

Ellipsis breadcrumb example

Rendering variant: Page title

Separator: >

Navigation Filter: Breadcrumb Navigation

Styles: Indent Top, Indent Bottom, Hide intermediate items, Indent Sides

Breadcrumb with icons

Icon breadcrumb example

Rendering variant: Icons

Separator: >

Navigation Breadcrumb: selected

Navigation Filter: Breadcrumb Navigation

Styles: Breadcrumb custom indicators