Breadcrumbs

Overview #

The Breadcrumbs section is designed to enhance navigation by providing a hierarchical list of links. This helps users easily navigate to parent pages, typically displayed at the top of a page. Breadcrumbs are particularly useful for improving user experience by allowing quick access to higher-level categories or pages.

Key components and functionality #

Breadcrumbs block

Use breadcrumb blocks to create custom parent links. This can be used to create the appearance of a sub-collection or sub-blog.

Home icon

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

Separator icon

The separator icon setting lets you choose the icon that separates breadcrumb links. The default separator is chevron_right. This setting helps in visually distinguishing between different levels in the breadcrumb trail.

Alignment settings

Control the alignment of content within the section or block. Breadcrumbs can be aligned differently on desktop and mobile devices to ensure optimal display.

• Alignment - Desktop: Adjusts the horizontal alignment of breadcrumbs on desktop screens.
• Alignment - Mobile: Adjusts the horizontal alignment of breadcrumbs on mobile screens.

Visibility settings

Optional. Control when this section is shown. Helpful for creating custom mobile layouts.

Usage examples #

1. Customizing the Home Icon: If you want to use a different icon for the home link, simply change the default home icon to your preferred icon in the settings.

2. Adjusting Separator Icons: To make the breadcrumb trail more visually appealing, you can replace the default chevron_right separator with another icon that better fits your site's design.

3. Responsive Alignment: Ensure that your breadcrumbs are aligned appropriately for both desktop and mobile views by adjusting the alignment settings. This ensures a consistent user experience across devices.

By utilizing these settings, you can create a breadcrumb trail that not only aids navigation but also aligns with your site's aesthetic and functional needs.