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. It includes custom metafield breadcrumb support for complex navigation structures, with dropdown functionality when there are multiple breadcrumb links to prevent overcrowding.

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

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