Breadcrumbs

Use Breadcrumbs to show a shopper where they are in the catalog hierarchy. Pass an array of category nodes, such as links; the trail renders only when you supply more than one category.

Import

import { Breadcrumbs } from '@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
categories	VNode[]	Yes	The categories to display in the breadcrumb trail.
separator	VNode<HTMLAttributes<SVGSVGElement>>	No	Icon used to separate items. Defaults to a slash.

Breadcrumbs also accepts standard HTML attributes (for example, className and aria-label).

Example

Render a breadcrumb trail of category links, with a custom separator icon.

import { Breadcrumbs, Icon, provider } from '@dropins/tools/components.js';
import { h } from '@dropins/tools/preact.js';

await provider.render(Breadcrumbs, {
  // Pass each category as an anchor VNode, not a plain string
  categories: [
    h('a', { href: '/' }, 'Home'),
    h('a', { href: '/men' }, 'Men'),
    h('a', { href: '/men/shoes' }, 'Shoes'),
  ],
  // Optional: omit separator to fall back to the default slash
  separator: h(Icon, { source: 'ChevronRight' }),
})(document.querySelector('.breadcrumbs'));

On a storefront, the product and category pages already render this trail, so you usually customize the shipped breadcrumbs instead of mounting the component yourself. See Breadcrumbs for PLP and PDP.

Related

• Icon — pass an Icon as the separator prop.
• Design tokens — the colors, spacing, and typography the trail uses.