Breadcrumbs

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.