Breadcrumbs

The Breadcrumbs block is a navigation tool that provides a hierarchical list of links, helping users easily navigate to parent pages. It typically appears at the top of a page and is available in the Hero and Multicolumn sections. Key settings include customizing the home and separator icons, defining text and links for each breadcrumb, and controlling link behavior such as opening in a new tab.

The block also offers alignment settings for consistent display across devices, an editor title for customization within the theme editor, and visibility options to manage how breadcrumbs appear on different devices. These features collectively enhance the user experience by providing clear navigation paths.

Practical usage examples include using the Breadcrumbs block in the Hero section for basic navigation, creating custom parent links in the Multicolumn section to reflect site hierarchy, and adjusting alignment settings for responsive design. These implementations ensure an intuitive and user-friendly navigation system that improves site usability.

Overview #

The Breadcrumbs block is designed to enhance navigation by providing a hierarchical list of links. This feature helps users easily navigate to parent pages, typically appearing at the top of a page.

Key components and functionality #

Home icon

This setting allows you to specify the icon used for the home link in the breadcrumb trail. The default icon is home.

Separator icon

The separator icon is used to visually separate breadcrumb links. The default icon is chevron_right. This setting helps maintain a clear and organized breadcrumb trail.

Parent link

This feature adds a static "parent" link to your breadcrumbs, providing a direct path back to a higher-level page. It is useful for creating a structured navigation experience.

Text

This setting allows you to define the text displayed for each breadcrumb link. It provides flexibility in customizing the breadcrumb labels to match your site's content.

Link

The link setting enables you to specify the URL each breadcrumb should point to, ensuring that users can navigate to the correct pages.

Open link in a new tab

This checkbox option allows you to decide whether breadcrumb links should open in a new tab. The default setting is false, meaning links open in the same tab by default.

Alignment settings

Breadcrumbs can be aligned horizontally on both desktop and mobile devices. This ensures that the breadcrumb trail is displayed consistently across different screen sizes.

Editor title

The editor title setting allows you to customize the title of the Breadcrumbs block within the theme editor. The default title is Breadcrumbs.

Visibility

This setting controls the visibility of the breadcrumbs on different devices. Options include not hiding the breadcrumbs, hiding them on desktop, or hiding them on mobile. The default option is do not hide.

Available in sections #

• Hero
• Multicolumn

Usage examples #

1. Basic navigation: Use the Breadcrumbs block in the Hero section to provide users with a clear path back to the homepage and other parent pages, enhancing the overall navigation experience.

2. Custom parent links: In the Multicolumn section, utilize the Parent link feature to create custom breadcrumb trails that reflect your site's hierarchy, such as sub-collections or sub-blogs.

3. Responsive design: Adjust the alignment settings to ensure that breadcrumbs are displayed appropriately on both desktop and mobile devices, maintaining a consistent user experience.

By implementing these settings and features, you can create an intuitive and user-friendly navigation system that enhances the usability of your site.