Breadcrumbs usage guidelines

Breadcrumbs display the user’s location within an application, and enable easy movement between levels.

When to use

• When users need to understand their location and navigate between multiple levels within the application’s hierarchy.

When not to use

• When the application has a single-level structure.
• When other navigation elements (such as a sidebar) are already present, unless using breadcrumbs would provide additional value.
• Do not use breadcrumbs as the main navigation pattern.

Usage

Preview

1. Home
2. Page
3. Subpage

Code

import { Breadcrumbs, BreadcrumbItem } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Breadcrumbs aria-label="Current location">
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem href="#page">Page</BreadcrumbItem>
      <BreadcrumbItem href="#subpage">Subpage</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Formatting and layout

Placement

Breadcrumbs should be positioned in the top left area of the page, below the application header but above the page title. If there is a top-level navigation element, breadcrumbs should be placed below it.

Do

1. Level 0
2. Level 1
3. Current

Page title

Content writing

Title and labels

Breadcrumbs labels should be short and clear, so that they can be easily scanned. Avoid long, complex phrases for breadcrumb labels and page titles.

Items

Limit breadcrumb items to five or fewer. Excessive items can confuse users and create layout issues. The current page should always be the final breadcrumb item.

Behaviors

Structure

Breadcrumbs consist of “page links” separated by dividers, starting with the highest-level parent page and progressing deeper into the site’s structure. The last page link is assumed to be the current page, and is non-interactive.

Navigation

Breadcrumbs should only focus on hierarchy navigation, and they should not substitute a top-level navigation.

Items

Breadcrumbs should always display a clear hierarchy structure. Each breadcrumb item should represent a page that can be navigated to. A breadcrumb item cannot be disabled.