Breadcrumbs

Overview

A comprehensive breadcrumb navigation component that displays the current page's location within the site hierarchy. The component shows a path from the home page to the current page, with specialized support for article and product templates. For custom paths, use product metafields product.metafields.custom.breadcrumbs or article metafields article.metafields.custom.breadcrumbs (namespace and key must match your store setup). Dropdown behavior helps when multiple breadcrumb links would otherwise overcrowd the row.

Common use cases

• Configure custom breadcrumb metafields in your content management for complex navigation structures

• Choose appropriate color schemes that provide sufficient contrast for readability

• Use padding options thoughtfully to ensure proper spacing within container elements

• Consider the visual hierarchy when placing breadcrumbs - typically best positioned near the top of content areas

• Test with long collection and article titles to ensure proper truncation behavior

• Ensure breadcrumb links are contextually relevant to the user's navigation path

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals visibility settings	Checkbox (default: false)

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the breadcrumbs	Checkbox (default: false)
Enable top padding	Adds top padding around the breadcrumbs	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the breadcrumbs	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background color scheme	• Body • Neutral • Accent 1 (default) • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Text color	Controls the text color	• Default (default) • Alternative • Primary background • Primary foreground • Secondary background • Secondary foreground • Tertiary background • Tertiary foreground • Neutral background • Neutral foreground • Shade

Style

Setting	Description	Options
Font family	Controls the font family used for the breadcrumbs	• Standard (default) • Heading • Subheading • Accent Visible when font size contains 'type--'
Font size	Controls the font size of the breadcrumbs	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on