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.

Section titled “ ref ”
Ref<HTMLElement>

The ref type for this component.

BreadcrumbsProps<T extends CollectionItem = CollectionItem>
Section titled “ id ”
string

The element's unique identifier. See MDN.

Section titled “ data-cim-style-root ”
boolean

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

Section titled “ UNSAFE_className ”
string

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

See styling guide.

Section titled “ UNSAFE_style ”
CSSProperties

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

See styling guide.

Section titled “ aria-label ”
string

Defines a string value that labels the current element.

Section titled “ aria-labelledby ”
string

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

Section titled “ aria-describedby ”
string

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

Section titled “ aria-details ”
string

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

Section titled “ children ”
ReactNode | ((item: T) => ReactNode)

The contents of the collection.

Section titled “ items ”
Iterable<T, any, any>

The items to display in the collection.

StyleProps
Section titled “ margin ”
Responsive<Spacing | "auto">

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

Section titled “ marginX ”
Responsive<Spacing | "auto">

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

Section titled “ marginY ”
Responsive<Spacing | "auto">

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

Section titled “ marginTop ”
Responsive<Spacing | "auto">

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

Section titled “ marginRight ”
Responsive<Spacing | "auto">

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

Section titled “ marginBottom ”
Responsive<Spacing | "auto">

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

Section titled “ 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
Section titled “ children * ”
StringLikeChildren

The text to display as the breadcrumb.

Section titled “ href * ”
string

A URL to link to.

Section titled “ id ”
Key

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

Section titled “ data-cim-style-root ”
boolean

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

Section titled “ UNSAFE_className ”
string

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

See styling guide.

Section titled “ UNSAFE_style ”
CSSProperties

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

See styling guide.

Section titled “ routerOptions ”
undefined

Options for the configured client side router.

Section titled “ hrefLang ”
string

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

Section titled “ target ”
HTMLAttributeAnchorTarget

The target window for the link. See MDN.

Section titled “ rel ”
string

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

Section titled “ download ”
string | boolean

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

Section titled “ ping ”
string

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

Section titled “ referrerPolicy ”
HTMLAttributeReferrerPolicy

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