Breadcrumb

The breadcrumb block is a navigation tool that provides a hierarchical list of links, allowing users to easily navigate back to parent pages. This feature enhances the user experience by offering a clear path through the website's structure. Key settings include the ability to add a static parent link, customize the breadcrumb text, and define the URL for each breadcrumb link. Additionally, you can choose whether links open in a new tab and control the visibility of the breadcrumb on different devices.

Visibility settings ensure that the breadcrumb block is displayed appropriately across various devices, with options to hide it on desktops or mobile devices if needed. This flexibility helps maintain a clean and user-friendly interface.

Practical usage examples include creating breadcrumbs for product pages to help users return to categories or the homepage, enhancing blog navigation by allowing users to navigate back to main or category pages, and using custom parent links to create specific navigation paths for related content. These examples illustrate how the breadcrumb block can be effectively utilized to improve site navigation and user experience.

Overview #

The breadcrumb block is designed to enhance navigation by providing a hierarchical list of links. This feature helps users easily navigate back to parent pages, improving the overall user experience on a website.

Key components and functionality #

Parent link

The parent link setting allows you to add a static "parent" link to your breadcrumbs, which can be useful for creating a structured navigation path for users.

Text

This setting allows you to specify the text that will be displayed in the breadcrumb. It is a customizable field where you can input any text that fits your navigation needs.

Link

This setting enables you to define the URL that the breadcrumb will link to. It is essential for directing users to the correct page when they click on a breadcrumb link.

Open link in a new tab

This checkbox setting allows you to choose whether the breadcrumb link should open in a new tab. The default value is false, meaning links will open in the same tab unless specified otherwise.

Visibility settings

Visibility settings control how the breadcrumb block is displayed across different devices. This ensures that the breadcrumb is visible where needed and hidden where it might not be necessary.

• Visibility: This setting controls the visibility of the breadcrumb block across different devices. You can choose from the following options:
  1. Do not hide - The breadcrumb will be visible on all devices. Default
  2. Hide on desktop - The breadcrumb will be hidden on desktop devices.
  3. Hide on mobile - The breadcrumb will be hidden on mobile devices.

Available in sections #

• Breadcrumbs

Usage notes #

• Responsive design: Ensure that the breadcrumb block is configured to display appropriately on different devices by using the visibility settings.
• Performance: Keep the breadcrumb links relevant and concise to avoid cluttering the navigation path.
• Accessibility: Ensure that the breadcrumb text is descriptive and provides clear context for users navigating with assistive technologies.

Usage examples #

1. Creating a breadcrumb for a product page: Use the breadcrumb block to create a navigation path from the homepage to a specific product page. This can help users easily return to the product category or homepage after viewing a product.

2. Enhancing blog navigation: Implement breadcrumbs in a blog section to allow users to navigate back to the main blog page or specific blog categories, improving the overall user experience.

3. Custom parent links: Use the parent link setting to create custom navigation paths, such as linking to a sub-collection or sub-blog, providing users with a clear path to explore related content.