Skip to content
Cimpress UI

Breadcrumbs API

Usage guidelinesAPI

Import

Section titled “Import”

Cimpress UI exports two breadcrumb-related components:

  • Breadcrumbs: container component that displays a list of breadcrumbs to help users navigate through a website.
  • BreadcrumbItem: renders a single breadcrumb within Breadcrumbs, providing a link to a specific page in the navigation hierarchy.
import { BreadcrumbItem, Breadcrumbs } from '@cimpress-ui/react';

Accessibility notes

Section titled “Accessibility notes”

Breadcrumbs follows the ARIA breadcrumb pattern.

Breadcrumbs renders a navigation landmark, and requires a textual label to identify itself to assistive technologies. See our accessibility guide for more details.

Collections

Section titled “Collections”

Breadcrumbs is a collection component. See our collection components guide to learn how to work with collections.

API reference

Section titled “API reference”
Section titled “Breadcrumbs”

Displays a list of breadcrumbs to help users navigate through a website.

See breadcrumbs usage guidelines.

ref Ref<HTMLElement>

The ref type for this component.

BreadcrumbsProps<T extends CollectionItem = CollectionItem>
id string

The element's unique identifier. See MDN.

data-cim-style-root boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

aria-label string

Defines a string value that labels the current element.

aria-labelledby string

Identifies the element (or elements) that labels the current element.

aria-describedby string

Identifies the element (or elements) that describes the object.

aria-details string

Identifies the element (or elements) that provide a detailed, extended description for the object.

children ReactNode | ((item: T) => ReactNode)

The contents of the collection.

items Iterable<T, any, any>

The items to display in the collection.

StyleProps
margin Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

Section titled “BreadcrumbItem”

Renders a single breadcrumb within Breadcrumbs.

BreadcrumbItemProps
children * StringLikeChildren

The text to display as the breadcrumb.

href * string

A URL to link to.

id Key

The ID of the item. Has to be unique across all items.

data-cim-style-root boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

routerOptions undefined

Options for the configured client side router.

hrefLang string

Hints at the human language of the linked URL. SeeMDN.

target HTMLAttributeAnchorTarget

The target window for the link. See MDN.

rel string

The relationship between the linked resource and the current page. See MDN.

download string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

ping string

A space-separated list of URLs to ping when the link is followed. See MDN.

referrerPolicy HTMLAttributeReferrerPolicy

How much of the referrer to send when following the link. See MDN.