Breadcrumb

Breadcrumb in Storybook

Examples

Check out the Usage section for details about how to design a breadcrumb properly, and the different configuration options we provide.

Basic example

Add a secondary navigation component to show a user their current location in respect to parent levels.

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Last item clickable example

By default the last item is not a clickable link, however you can change this using the lastItemClickable property.

<Breadcrumb
  lastItemClickable={true}
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Back link example

If there is only one parent, the component renders as a link with the text "Back" and a left-facing arrow. The showTwoBreadcrumbs property takes precedence over this property.

<Breadcrumb
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Back link without text example

If there is only one parent and the backLinkWithoutText property is true, the component renders as just a left-facing arrow. The showTwoBreadcrumbs property takes precedence over this property.

<Breadcrumb
  backLinkWithoutText={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Show Two Breadcrumbs example

If there are exactly two breadcrumb items and the showTwoBreadcrumbs is set to true, the component renders both the parent and current page as clickable breadcrumbs. If showTwoBreadcrumbs is false, a back link renders as an arrow, with or without text depending on backLinkWithoutText.

<Breadcrumb
  showTwoBreadcrumbs={true}
  links={[
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      href: 'current-url',
      text: 'Current Page',
    },
  ]}
/>

Usage

Overview

The breadcrumb is a secondary navigational component that helps users identify their current location and enables them to move to a parent level or a previous step. Comprised of text links, each link in a breadcrumb represents a page, one level up, that users can quickly access.

Breadcrumbs are an important navigational element that support wayfinding — making users aware of their current location within the hierarchical structure of an application.

When to use

• Products and experiences with hierarchies that are more than two levels deep.
• You want to inform the user of where they are in the application's information hierarchy.
• The user is most likely to have landed on the page from an external source.

When not to use

• As the primary way to navigate an app or site.
• For products that have single-level navigation.
• To help users keep track of their progress during a multi-step process. Use one of the progress indicator components instead.

Formatting

Anatomy

The breadcrumb component consists of the following elements:

1. Text link: Breadcrumbs appear as a live text link with a blue fill, like hyperlinks. They direct users to the parent-level page.
2. Text link separator: The separator provides a visual indication of separation between pages. It uses the same font as the text link. Separators aren't interactive.
3. Current item: The breadcrumb item for the page the user is currently viewing. Appears as plain text.

Placement

Place breadcrumbs at the top left portion of the page.

Best practices

• All items in the breadcrumb trail (except the current page) must represent a place the user can go to. If there's a logical category that doesn't have an associated page, don't include it in the breadcrumb trail.
• Breadcrumb trails typically start with the homepage. However, if the global navigation includes a link to the homepage, don't include the Home link in the breadcrumb trail.
• Breadcrumbs are intended to show the hierarchical structure of the site, not the history of pages traversed.
• Ensure that all items in the breadcrumb trail, except the current page, are active links.
• On mobile devices, don't wrap breadcrumbs to multiple lines. Consider shortening the breadcrumb trail to include only the last levels.

Source: Nielsen Norman Group

Content

General writing guidelines

• Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
• Use present tense verbs and active voice in most situations.
• Use common contractions to lend your copy a more natural and informal tone.
• Use plain language. Avoid unnecessary jargon and complex language.
• Keep words and sentences short.

Page links

• The word or words in the breadcrumb text link should be accurate, specific, and explicit — not vague.
• Users should never be surprised by what happens after they click or tap on a text link.
• Breadcrumb labels ideally use sentence case, if the linked pages use that case.

Do use accurate and specific labeling.

Don't use vague or ambiguous labels.

Behaviors

• If there's only one item to display, the breadcrumbs don't render. This means that the user is at the top level of a navigation structure.
• If there are only two items to display, the component renders a Back button.
• If there are more than two items to display, the component renders the usual breadcrumbs.

States

Breadcrumbs have the same interactive states as the link component.

Interactions

Keyboard

Navigate to the links using the TAB key. Activate the link using the ENTER key.

Screen reader

The aria role of 'navigation' and the aria-label='breadcrumb' are included to provide more context to screen reader users. Similarly, when the 'lastItemClickable' checkbox is enabled, the final link in the breadcrumb trail adopts the value aria-current="page" to identify the current page.

Accessibility

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.

Refer to the guidance below and also to the WAI-ARIA Authoring Practices for Breadcrumbs. Considerations include the following:

• The breadcrumb trail must remain in the same location on each page.
• Link text must be clear and understandable.

Code

<Breadcrumb
  links={[
    {
      href: 'grandparent-url',
      text: 'Grandparent Page',
    },
    {
      href: 'parent-url',
      text: 'Parent page',
    },
    {
      text: 'Current Page',
    },
  ]}
/>

Import statement

import { Breadcrumb } from '@jutro/router';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

backLinkWithoutText

Type

boolean

Description

If set to true, the back link renders as just an "arrow" icon. If set to false, it also includes the word "Back". The showTwoBreadcrumbs property takes precedence over this property.

className

Type

string

Description

CSS class name for this component.

lastItemClickable

Type

boolean

Description

If set to true, the last item in the breadcrumb is also a link.

links

Type

({text: IntlMessageShape, href: IntlMessageShape} & Link)[]

className

Type

string

Description

CSS class name for this component.

href

Type

IntlMessageShape

Description

URL or path for the link.

Link

Type

Link

Description

Additional properties from the Link component.

Description

Takes an array of objects, one per each link to be displayed.

renderLinkTrigger

Type

Link

Description

RenderProp function to generate each individual link that makes up the breadcrumbs. Uses the properties from the Link component.

showTwoBreadcrumbs

Type

boolean

Description

If set to true, breadcrumbs for both the parent and the current page are displayed if there are only two breadcrumbs. If set to false, the back link renders as an arrow with or without text depending on backLinkWithoutText.

Hooks

No hooks are available for breadcrumb.

Translation keys

There are no translations for breadcrumb.

For information on how to manage translations, see our section about Internationalization.

Escape hatches

For more information, see our documentation about escape hatches.

Changelog

10.12.0

The showTwoBreadcrumbs prop was added to allow the display of both breadcrumb links if there are only two breadcrumb links: the current page and the "home" page. Previously, a back arrow (with or without text) was always displayed.

10.9.0

• A new opt-in feature was introduced that disables automatic event publishing for the Breadcrumb component. You can enable this feature by adding JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true to the .env file in the root of your Jutro application. When this is enabled, legacy components no longer publish events by default. For more information on events and how to set up new events, see the Events documentation.

10.4.0

• Added support for design tokens.