Breadcrumbs

Overview

The Breadcrumbs Block provides a clear path from the homepage to the current page, making it easy for users to understand their location and move through your site's structure. This navigation aid improves usability and helps users retrace their steps quickly. Configurable settings let you adjust icons, parent links, alignment, and visibility to align with your site's needs.

⚠️ Important: Enabling breadcrumbs helps users confidently navigate, encourages deeper exploration, and reduces site confusion.

Available in sections

You can add the Breadcrumbs Block to the following sections:

1. Hero

2. Multicolumn

3. Sidebar

Key components and functionality

Breadcrumbs introduction

The Breadcrumbs Block creates a navigation trail that guides users from the homepage through parent pages or categories all the way to their current location. Customization options help you tailor the appearance and function to maintain consistency with your site's design, while helping visitors move backwards or revisit higher-level categories with ease.

Home and separator icons

These settings personalize the entry point and structure of your breadcrumbs trail for a consistent and brand-aligned look.

1. The home icon is placed at the beginning of the breadcrumb path and usually symbolizes the homepage.
   Default: home

2. The separator icon appears between navigation items, visually breaking up the breadcrumb trail.
   Default: chevron_right

   1. Use clear, recognizable icons to ensure breadcrumbs are easy to scan and understand.

Parent link group

Parent link settings allow you to add a custom parent page to your breadcrumbs, making navigation to key sections fast and intuitive for your users.

1. Text sets the visible label for the parent link in your trail.

2. Link is the destination URL for the parent breadcrumb.

3. Open link in a new tab determines whether the parent link will open in a new tab or in the current window.
   Default: false

   1. Opening in the same tab is preferred for most breadcrumb links, as it keeps the user's navigation context.

Alignment settings

Alignment options help your Breadcrumbs Block look great on all screen sizes by letting you set the trail's placement independently for desktop and mobile.

1. Desktop alignment lets you position the breadcrumb trail on larger screens for optimal balance.

2. Mobile alignment provides device-specific alignment controls for smaller screens.

   1. Having separate alignment options ensures a visually cohesive look across all devices.

Editor settings

Editor settings assist with organization and block management inside the visual editor, especially when working with multiple blocks or complex layouts.

1. Title is what you will see in the editor for this block.
   Default: Breadcrumbs

   1. This label is not displayed to visitors and is solely for your convenience while editing.

Visibility settings

Visibility controls let you determine exactly when your Breadcrumbs Block appears, keeping your storefront uncluttered and user-friendly across devices.

1. Do not hide — breadcrumbs appear on desktop and mobile devices.
   Default: do not hide

2. Hide on desktop — shows the breadcrumb trail only on mobile devices.

3. Hide on mobile — shows the breadcrumb trail only on desktop devices.

   1. Adjust visibility as needed to best fit your design and audience.

Usage notes

⚠️ Important: Use short, descriptive labels for all breadcrumb links, and make sure icons, separators, and text meet accessibility guidelines for contrast and clarity.

1. Always preview your breadcrumbs on both desktop and mobile layouts for the best appearance.

2. Select icons and separators that support your site's visual identity.

3. Check that all links point to logical destinations and support a natural navigation flow.

4. Only include as many breadcrumbs as needed to prevent clutter and confusion.

💡 Tip: Test the Breadcrumbs Block regularly on various devices to ensure proper alignment and a seamless experience.

📝 Note: Simplicity is key. Limit breadcrumbs to links that offer real value—fewer, well-placed breadcrumbs often work best.