Breadcrumb

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.