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:

9C7766BFDBF044009BA268964606F64E.png

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.

    5754A850620F4B99881C9D533C077E6A.png
  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.

      38F388A5D0DF4EFF971B9577324E2693.png

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

Type

Screenshot

Settings

Simple breadcrumb

6D3AA426787A41A3ABC0CD6033988FCF.png

Rendering variant: Page title

Separator: >

Navigation Filter: Breadcrumb Navigation

Styles: Indent Top, Indent Bottom, Indent Sides

Breadcrumb with ellipses

474289846FD542F0A9236E1E348E4C94.png

Rendering variant: Page title

Separator: >

Navigation Filter: Breadcrumb Navigation

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

Breadcrumb with icons

E412C1EC7AB148C2A63FC1CC1DB02E3B.png

Rendering variant: Icons

Separator: >

Navigation Breadcrumb: selected

Navigation Filter: Breadcrumb Navigation

Styles: Breadcrumb custom indicators