Breadcrumb

Overview

The Breadcrumb block provides a clear navigational trail for users, making it easy to understand their position within your shop and move between different levels. This improves the shopping experience by offering both orientation and efficient navigation.

📝 Note: Adding Breadcrumb navigation clarifies your site's structure and supports accessibility by making complex store layouts easier to explore.

Key components and functionality

The Breadcrumb block enables flexible navigation through options for label text, link destinations, link behavior, and device-specific visibility. Each setting is designed to help you create intuitive pathways that match the layout and organization of your shop.

Parent link configuration

This setting group allows you to include an optional parent link in your breadcrumb trail, guiding visitors back to important landing pages or higher-level categories. These options help shape logical site journeys and make navigation more intuitive.

1. Enter the visible label for the parent breadcrumb link using the Text setting.

   1. Use clear and descriptive wording to indicate the link's destination.

2. Specify the destination URL for the parent breadcrumb link with the Link setting.

   1. This should direct users to a higher-level or broader page.

3. Control whether the parent breadcrumb link opens in a separate browser tab using the Open link in a new tab setting.

   1. The default is disabled.

   2. Enable this if you are linking to external sites or content that should remain open separately.

💡 Tip: Use concise, informative text for parent links and ensure that each URL provides a meaningful step up in your shop's hierarchy.

Visibility controls

Visibility settings manage when and where the Breadcrumb block appears, allowing you to optimize navigation for different device types. Adjust these settings to create a responsive design that meets your customers' needs and maintains a clean layout.

1. Control where the block is displayed using the Visibility setting.

   1. Do not hide

      • The block is always visible. This is the default setting.

   2. Hide on desktop

      • The breadcrumb appears only for mobile users.

   3. Hide on mobile

      • The breadcrumb appears only for desktop users.

   Refining visibility by device type helps you balance clarity and simplicity across layouts.

💡 Tip: Adjust breadcrumb display for different devices to keep site navigation intuitive and decluttered.

Available in sections

1. Breadcrumbs

Usage notes

1. Use short, meaningful labels for all breadcrumb links so navigation stays clear, especially on mobile.

2. Support accessibility by writing each breadcrumb label so it accurately describes its target.

3. Only use the "open link in a new tab" feature for external destinations, preventing users from losing their place in your shop.

4. Regularly review breadcrumb trails to confirm logical order and avoid unnecessary or duplicate steps.

Breadcrumb blocks streamline navigation and create a more intuitive experience, particularly on shops with many categories or deeply nested content. The flexibility in customization and responsive controls ensures that breadcrumbs remain helpful and effective for all users.