Breadcrumbs

Featured links

1. Company XYZ documentation on the breadcrumbs block
2. Company XYZ documentation on icons
3. Company XYZ documentation on the breadcrumb block
4. Company XYZ documentation on colors settings
5. Company XYZ documentation on visibility settings
6. Shopify documentation on sections and blocks
7. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to display a breadcrumb trail near the top of a page so customers can quickly understand where they are and move back to broader pages. It works best on pages with deeper navigation paths, where an extra layer of orientation helps people browse with less friction.

You can customize the home icon, choose a separator style, and optionally add a fixed parent link. For a general reference, see Breadcrumbs. For how blocks are organized in the editor, see Shopify documentation on sections and blocks

Core settings

The main settings control the visual style of the breadcrumb trail itself.

Use the Home icon field to swap in a different icon if your store uses a consistent icon set or a more minimal look. The Separator icon can use either an emoji or a supported icon name, and you can leave it blank if you want the breadcrumb items to appear without visible dividers. For icon naming help, see Icons.

Tip

Simple, familiar icons are usually easier to scan than decorative ones.

Parent link

This group adds a static parent link to the breadcrumb trail. It is useful when you want to guide customers back to a specific landing page, collection hub, or curated destination that matters in your navigation flow.

Add both the text and link so the parent step reads naturally in the trail. Opening the parent link in a new tab is available, but breadcrumbs usually feel more natural when they keep customers in the same browsing path. For more context, see Parent link.

Add a static parent link only when it matches the page path customers will expect. If it feels out of sequence, it can make the breadcrumb harder to trust.

Alignment settings

These settings let you control horizontal alignment separately on desktop and mobile. This is useful when the breadcrumb needs to line up with a centered page header on one device size and a left-aligned content column on another.

If your breadcrumb trail becomes long, test the mobile layout carefully. Left alignment is often easier to read when the trail wraps onto multiple lines.

Note

Desktop and mobile controls can behave differently in tight layouts, so review both viewport sizes after adjusting alignment or visibility.

Standard block settings

Color settings

These settings override the broader theme color choices for this block. Use them when the breadcrumb sits on a tinted, image-based, or otherwise non-standard background and needs better contrast. For shared color behavior, see Color settings.

Caution

Make sure both text and icons remain easy to read against the background, especially if you use lighter custom colors.

Visibility settings

Use these settings to hide the block on desktop or mobile. This is helpful when you want a cleaner mobile header or when breadcrumbs are only useful in one layout context. For shared visibility behavior, see Visibility settings.

Editor settings

These settings affect how the block is labeled in the editor sidebar. A clear editor title can make this block easier to find when you are managing several navigation or header-related blocks. For the editor interface, see Shopify documentation on the theme editor

Usage notes

1. Place it high on the page. Breadcrumbs are most useful when they appear before the main content, where customers expect orientation tools.
2. Keep the path intuitive. Use the parent link only when it supports the page hierarchy customers are likely to assume.
3. Choose restrained icons. Subtle home and separator icons help the breadcrumb stay readable without competing with the page title.
4. Check smaller screens. Review long breadcrumb trails on mobile to make sure wrapping and alignment still feel clean.
5. Use color overrides carefully. Custom icon and text colors should improve contrast, not just match nearby design accents.