Breadcrumbs

Overview

The Breadcrumbs section provides a clear navigation trail for users by displaying links from the homepage to the current page. This supports site orientation and allows quick navigation backward through your site structure. Breadcrumbs create a consistent path for visitors, reducing confusion and increasing overall comfort while browsing.

⚠️ Important: Adding Breadcrumbs ensures visitors know where they are on your site and can easily return to previous sections, enhancing usability.

Key components and functionality

Section introduction

Breadcrumbs present a visual map of your site's hierarchy, guiding users from the homepage to their current destination. This trail reduces user frustration by making navigation to parent categories or landing pages seamless and intuitive.

Icon settings

Icon settings define the symbols users see at each end and between sections of the breadcrumb trail. Using appropriate icons both anchors the experience and maintains a clean, professional appearance.

Icon home

The first breadcrumb uses an icon representing the homepage. This familiar touchpoint increases confidence and is especially useful for large or multi-level sites.

1. The default value is home.

2. You may enter another supported icon name for custom branding.

Icon separator

This icon or symbol appears between breadcrumb steps to visually divide them.

1. The default value is chevron_right.

2. Select a separator that fits your site's theme and offers clarity.

Alignment settings

Alignment controls help you match breadcrumbs to your site's layout, maintaining consistency across devices.

These settings ensure that breadcrumb trails look visually balanced and are easy to interact with on both desktop and mobile.

Alignment desktop

Set the horizontal alignment of breadcrumbs on desktops. Choose left, center, or right positioning to best suit your overall design and navigation structure.

No default value is set; review your design to choose the ideal alignment.

Alignment mobile

Set the horizontal alignment for mobile screens. This supports the best navigation experience no matter the device.

No default value is set; test on real devices to achieve optimal layout.

Supported block types

Breadcrumbs supports the following block type:

1. Breadcrumb

   1. Each Breadcrumb block creates a step in the navigation trail.

   2. You can configure for each:

      1. The displayed text for that step.

      2. The link target for each breadcrumb step.

      3. Whether the link opens in a new tab.

      4. The visibility of the breadcrumb link for different devices.

Usage notes

1. Set clear, concise labels for each breadcrumb step to improve accessibility and orientation.

2. Limit breadcrumbs to essential navigation points for a clean appearance.

   1. Overly long breadcrumb trails can distract and overwhelm visitors.

3. Always verify that icons and text provide strong contrast with their background to ensure readability for all users.

4. Test breadcrumb appearance and function on both desktop and mobile after any customization.

5. Add Breadcrumbs to the top areas of templates where users might need navigation support, such as collection or product pages.

6. Use descriptive link text to benefit all users, including those with assistive technologies.

7. Avoid complex or over-designed backgrounds; choose high-contrast, simple styling for optimum effect.

💡 Tip: Preview your Breadcrumbs section on different devices to confirm correct alignment, separator clarity, and overall accessibility.

🚧 Caution: Select reliable, recognizable icons for breadcrumbs and keep your navigation path straightforward to maximize user confidence and site clarity.