Example

  <wui-breadcrumb>
    <wui-breadcrumb-item><a href="#">Link 1</a></wui-breadcrumb-item>
    <wui-breadcrumb-item><a href="#">Link 2</a></wui-breadcrumb-item>
    <wui-breadcrumb-item><a href="#">Link 3</a></wui-breadcrumb-item>
  </wui-breadcrumb>

Usage

The breadcrumb is usually found in the sticky header, forming a close synergy with the heading. While the heading always indicates to users which page they are currently on, the breadcrumb shows in what context the respective page is to enhance overall comprehension. In most tasks, a user delves one level deeper into the platform with each click, making the breadcrumb trail a useful means of navigating back up the hierarchy. However, it's also possible for the breadcrumb trail to completely change when there's a shift in context, for example.

Variants

First of several levels

When we display the first level of many, we use wui-scene-header--compact and the breadcrumb, where the link does not perform any action. There is a very similar variant (wui-scene-header--toplevel), which is always combined with a headline when no subsequent pages are nested hierarchically beneath them.
To learn more about the different header variants, please check out scene header

nth level

WUI decisions

• Separator. The individual items in the breadcrumb are separated by /, and there is no separator at the end of the breadcrumb list.
• Links. The main function of the links is the orientation of the user, with navigation playing a more secondary role. For example, on overview pages - some links are not clickable, but serve for orientation.