Skip to content
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 |
| Text color | Controls the text color | • Default (default) |
Style
| Setting | Description | Options |
|---|---|---|
| Font family | Controls the font family used for the breadcrumbs | • Standard (default) |
| Font size | Controls the font size of the breadcrumbs | • Smaller |
Layout
| Setting | Description | Options |
|---|---|---|
| Horizontal alignment | Controls horizontal alignment | • Left (default) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |