Success
Breadcrumbs
Show a breadcrumb trail that helps customers move back through parent pages with ease.
- Shopify documentation on the theme editor
- Company XYZ documentation on the breadcrumb block
- Company XYZ documentation on icons
- Company XYZ documentation on section padding settings
- Company XYZ documentation on section backgrounds settings
- Company XYZ documentation on separators settings
- Company XYZ documentation on visibility settings
- Company XYZ documentation on layout widths settings
Use Breadcrumbs to show a clear navigation path back to higher-level pages. It works best near the top of a page, where it can support navigation without competing with the main content. For broader theme setup context, see Shopify documentation on the theme editor
Core settings
Section titled “Core settings”The main settings control the icons used in the breadcrumb trail. You can use a home icon for the first item and choose a separator icon between breadcrumb links. For separator icons, you can enter an emoji or an icon name, or leave the field blank for a cleaner look with no separator shown. For icon help, see the icon guide.
Keep the breadcrumb styling simple when the page already has strong visual elements nearby. A minimal separator often feels cleaner and is easier to scan on smaller screens.
Alignment settings
Section titled “Alignment settings”These settings control horizontal alignment separately for desktop and mobile. This is useful when breadcrumbs need to line up with surrounding content on larger screens but need a different position on smaller screens.
Left alignment is usually the easiest to read, especially when breadcrumb paths are longer. If the trail feels cramped on mobile, simplify the icons or shorten labels before forcing a more decorative alignment.
Color settings
Section titled “Color settings”These settings override the broader theme colors for this section. They are most useful when the breadcrumb trail sits on a custom background or needs a lighter or darker treatment than the rest of the page.
Try to keep breadcrumbs visually secondary while still readable and clearly interactive. Text and icon colors should have enough contrast to remain easy to spot without looking like primary calls to action.
Breadcrumbs should stay subtle, but customers still need to recognize them as navigation.
Supported block types
Section titled “Supported block types”- Breadcrumb
Breadcrumb
Section titled “Breadcrumb”Use this block to add a static parent link to the breadcrumb trail. This is helpful when you want to insert a manual step for landing pages, custom content paths, or special navigation flows. For block setup details, see Company XYZ documentation on the Breadcrumb block.
- Keep block text short so the full trail stays readable.
- Use the link setting for genuine parent destinations, not decorative or repeated links.
- Use the block visibility setting when a manual parent link is only useful on desktop or only on mobile.
Standard section settings
Section titled “Standard section settings”Padding settings
Section titled “Padding settings”Padding settings control the space above and below the breadcrumb trail on desktop and mobile. In this section, they help you create comfortable separation from the header and the page content.
Because breadcrumbs are compact, lighter spacing usually feels best. Add more padding only when the section needs to stand apart visually or includes a background treatment.
Section background settings
Section titled “Section background settings”Section background settings let you place the breadcrumb trail over a color, gradient, image, or video. This can help the section feel distinct, especially in more customized page layouts.
Use background treatments carefully here, since breadcrumbs are small and easy to overpower. Overlay controls can help preserve readability when using images or video.
Separator settings
Section titled “Separator settings”Separator settings add an optional line above or below the section. They are useful when you want to separate the breadcrumb area from surrounding content without adding much extra space.
A top separator can work well beneath a header, while a bottom separator can help define the start of the main page content. If you leave the separator color transparent, the standard border color is used.
Visibility settings
Section titled “Visibility settings”Visibility settings control whether the whole breadcrumb section appears on desktop, mobile, or both. This is helpful when you want a simpler layout on one device size.
Use section visibility for broad layout decisions. If the section is hidden on a device size, any block-level visibility choices inside it will not appear there either.
Width settings
Section titled “Width settings”Width settings control both the content width of the breadcrumb trail and the width of the section wrapper. This helps you align the breadcrumbs with nearby content or extend a background treatment further across the page.
Matching the content width to the surrounding layout usually creates the cleanest result. When changing width settings, preview the live page as well as the editor view, since layout changes can feel different in each.
Usage notes
Section titled “Usage notes”- Keep labels concise. Short breadcrumb names are easier to read and less likely to wrap awkwardly on mobile.
- Use manual links only when helpful. Add Breadcrumb blocks when they clarify the path, not when they repeat obvious navigation.
- Watch for block-driven changes. Additional breadcrumbs can change the trail more than section-level settings do, so review the full path after adding or removing blocks.
- Match nearby layout choices. Align width, spacing, and position with the surrounding page so the trail feels intentional.
- Check readability on custom backgrounds. Review text, icon, and separator contrast whenever you add color, images, gradients, or video.
- Test both device sizes. Breadcrumbs can behave differently on desktop and mobile, so review alignment, visibility, and any media treatments in both views.