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 will render as a link with the text "Back" and a left-facing arrow.

<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 will render as just a left-facing arrow.

<Breadcrumb
  backLinkWithoutText={true}
  links={[
      {
      href: 'parent-url',
      text: 'Parent page'
      },
      {
      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.

Accessibility

Breadcrumbs are a list of links representing the current page and its "ancestors" (parent page, grandparent page, and so on). Breadcrumbs can assist users in finding their place within a website or web application.

• Screen reader interaction: 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.
• Keyboard interaction: Navigate to the links using the TAB key. Activate the link using the ENTER key.
• Color: The contrast ratio of textual elements against their background is above 4.5:1, as per WCAG 2.0 AA requirements.
• Zoom: All content is visible and functional up to and including a zoom factor of 200%.

This component has been validated to meet the WCAG 2.0 AAaccessibility 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

linksrequired

Type

{links: {text: string, href: string}[]}

Description

Takes an array of objects, each item contains props for the used Link type component.

backLinkWithoutText

Type

bool

Description

If true, the back link will render as just an "arrow" icon. If false, it will also include the word "Back"

className

Type

string

Description

Additional class to wrap the component.

lastItemClickable

Type

bool

Description

Determines if the last item is a link.

renderLinkTrigger

Type

(props: BreadcrumbLinkProps) => React.ReactNode

Description

RenderProp function to generate the component that makes up the breadcrumb.

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.4.0

• Added support for design tokens.