Breadcrumb

Guidelines

Guidelines

Breadcrumb navigation is a UI control that allows users to track their location within an application and easily navigate to previous or child pages. Breadcrumbs make the structure of applications transparent to users. We typically use breadcrumbs in applications that have a deep hierarchy of pages or content. This helps users understand where they are within applications, and makes it easier to navigate to pages further along the navigation tree. As a general rule, we use breadcrumbs for information architecture with more than two levels, but not as a replacement for an application's main navigation. If the information structure is extremely complex, we often consider using a tree instead of a breadcrumb.

Breadcrumb items are interactive. Users navigate to their respective location by pressing the item. Each item contains a breadcrumb label. All items in the breadcrumb path are always followed by a chevron icon except for the last item.

1. Breadcrumb item
2. Separator
3. Dropdown

Variants

Breadcrumbs are available as a ghost and solid variant. Both variants differ in font and fill color but interact in the same pattern. We typically use the ghost variant to create a lower visual emphasis for users.

Options

• Icon: Breadcrumb items can, but don't have to, include an icon. The icon is positioned before the breadcrumb label. Icons can be included for each item or only for specific items (e.g. the root item).
• Show child items on last item: By default, the last item of the breadcrumb doesn't offer any user interaction. An interactive item variant is available which allows the user to browse to child pages of the current page. Pressing the item triggers a dropdown listing all child elements.
• Visible item count: By default, breadcrumbs display a limited number of items. This number can be adjusted.

Behavior in context

• Population: As a general rule, we populate breadcrumbs location-based to reflect the hierarchy of the application and the location of the user within it. We always include the current location in the breadcrumb.
• Overflow: If the number of items exceeds the defined limit, items are hidden within a dropdown menu at the beginning of the path. The dropdown menu is triggered by pressing the respective item. The truncation is visualized with an ellipsis. The overflow behavior can also be triggered if the available space does not allow the complete display of the breadcrumb in one line.
• Text truncation: Truncation is applied to individual breadcrumb items if the maximum width of the breadcrumb item is exceeded. The label name is truncated with an ellipsis.
• Placement: We typically place breadcrumbs at the top left side of the page/content area, below the header and above the page title.

States

Interactive items can take one of four states: Default, hover, active and focused. Non-interactive items are always in default state.

Dos and Don'ts

• Do label each item, i.e. use more than icons
• Do use single-line text entries as breadcrumb items have a fixed height
• Don't use breadcrumbs to display a multistep process (use the workflow control instead)
• Don't show multiple breadcrumbs on one screen, e.g. in a content area and in a drawer

Related patterns:

• Dropdown
• Basic navigation
• Map navigation
• Workflow

Development

Development

Examples

PreviewAngularReactVueJavaScript

Truncate

PreviewAngularReactVueJavaScript

Lazy loaded next items

PreviewAngularReactVueJavaScript

API (ix-breadcrumb)

Properties

Name

Description and specifications

ariaLabelPreviousButton

Since 2.0.0

Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list with conditionally hidden previous items

Attribute:

aria-label-previous-button

Type:

string

Default:

'previous'

ghost

Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)

Attribute:

ghost

Type:

boolean

Default:

true

nextItems

Items will be accessible through a dropdown

Type:

string[]

Default:

[]

visibleItemCount

Excess items will get hidden inside of dropdown

Attribute:

visible-item-count

Type:

number

Default:

9

Events

Name

Description and specifications

itemClick

Crumb item clicked event

Detail:

string

nextClick

Next item clicked event

Detail:

{ event: UIEvent; item: string; }

API (ix-breadcrumb-item)

Properties

Name

Description and specifications

icon

Icon to be displayed next ot the label

Attribute:

icon

Type:

string ｜ undefined

label

Breadcrumb label

Attribute:

label

Type:

string ｜ undefined

Events

No events available for this component.