The Breadcrumbs Block creates a navigational trail that shows users their current location within your website’s hierarchy. This DigiBlocks Pro block automatically generates breadcrumb navigation based on your site’s structure and can be used with the DigiFusion theme and its site builder feature from DigiFusion Pro. The DigiFusion theme provides the optimal foundation for this block’s functionality.
Adding the Breadcrumbs Block
Navigate to the post, page, or template where you want to display breadcrumb navigation. Click the block inserter (+) and search for “Breadcrumbs” in the DigiBlocks Theme category. The block displays a placeholder breadcrumb trail in the editor that shows how the navigation will appear on the frontend.
Layout Configuration
Alignment Options
Control how the breadcrumb trail is positioned on your page using the Alignment setting in the General panel:
- Left – Aligns breadcrumbs to the left side of the container
- Center – Centers the breadcrumb trail horizontally
- Right – Aligns breadcrumbs to the right side of the container
The alignment setting includes responsive controls, allowing you to set different alignments for desktop, tablet, and mobile devices.
Home Link Configuration
Enable or disable the home link at the beginning of your breadcrumb trail:
Show Home Link – Toggle to control whether the home page link appears as the first breadcrumb item.
Home Text – When the home link is enabled, customize the text that appears for the home page link. The default text is “Home” but you can change it to match your site’s branding or language preferences.
Current Page Display
Show Current Page – Toggle to control whether the current page appears as the final item in the breadcrumb trail. When enabled, the current page title is displayed as non-clickable text at the end of the breadcrumb sequence.
Separator Customization
Configure the visual separator that appears between breadcrumb items:
Separator Size
Control the dimensions of the separator icon using the responsive range slider. The separator size can be adjusted from 6px to 36px, with independent settings for desktop, tablet, and mobile devices.
Separator Spacing
Set the horizontal spacing around the separator using the responsive range control. Values range from 0px to 30px, allowing you to create tight or loose spacing between breadcrumb items and their separators.
The default separator uses a right-pointing chevron icon that automatically inherits the separator color you define in the color settings.
SEO Plugin Integration
The Breadcrumbs Block integrates with popular SEO plugins to maintain consistency with your existing breadcrumb configurations:
Yoast SEO Integration
Use Yoast SEO Breadcrumbs – When enabled, the block will use Yoast SEO’s breadcrumb format and settings if the plugin is active on your site. This ensures consistency with breadcrumbs generated by Yoast elsewhere on your site.
Rank Math Integration
Use Rank Math Breadcrumbs – When enabled, the block will use Rank Math’s breadcrumb format and settings if the plugin is active on your site. This maintains consistency with Rank Math’s breadcrumb structure and hierarchy.
Color Customization
Text and Link Colors
Configure the appearance of breadcrumb elements in the Colors panel:
Text Color – Sets the color for non-clickable breadcrumb items, including the current page text and any separator text.
Link Color – Defines the color for clickable breadcrumb links in their normal state.
Link Hover Color – Sets the color that breadcrumb links change to when users hover over them with their cursor.
Separator Color – Controls the color of the separator icons between breadcrumb items.
All color settings support alpha transparency, allowing you to create semi-transparent effects or maintain consistency with your theme’s color scheme.
Typography Settings
The Typography panel provides comprehensive control over the text appearance of your breadcrumbs:
Font Family
Select from hundreds of Google Fonts or use web-safe font families to match your site’s typography. The font family applies to all breadcrumb text elements.
Font Size
Set responsive font sizes for desktop, tablet, and mobile devices. Default sizes are 14px for desktop, 13px for tablet, and 12px for mobile, but you can adjust these to match your design requirements.
Font Weight
Choose from available font weights (Light, Regular, Medium, Semi-Bold, Bold) based on your selected font family.
Text Styling
Additional typography options include:
- Font style (normal or italic)
- Text transform (none, uppercase, lowercase, capitalize)
- Text decoration (none, underline, line-through)
Line Height and Letter Spacing
Fine-tune the vertical spacing between lines and horizontal spacing between characters using responsive controls. Line height can be set in em units for proportional spacing, while letter spacing uses pixel values for precise control.
Advanced Styling
Spacing Controls
Margin – Set external spacing around the entire breadcrumb block using the responsive dimension control. Configure top, right, bottom, and left margins independently for each device size.
Animation Effects
Add entrance animations to make breadcrumbs more engaging when they come into view:
Animation Effect – Choose from various animation options including fade, slide, zoom, and bounce effects. Select “None” to disable animations.
Preview Animation – When an animation is selected, use the Preview Animation button to see how the effect will look in the editor.
Visibility Controls
Control when the breadcrumbs appear across different devices:
Hide on Desktop – Prevents breadcrumbs from displaying on desktop screens (992px and above).
Hide on Tablet – Hides breadcrumbs on tablet devices (768px to 991px).
Hide on Mobile – Removes breadcrumbs from mobile devices (767px and below).
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Technical Attributes
HTML Anchor
Set a unique HTML anchor ID for the breadcrumb block to enable direct linking to the breadcrumb section. This creates a web address fragment that can be used for page jumps and navigation.
Additional CSS Classes
Add custom CSS classes to the breadcrumb block for advanced styling or integration with custom themes and plugins. Multiple classes should be separated with spaces.
Frontend Behavior
The Breadcrumbs Block automatically generates the appropriate breadcrumb trail based on your site’s structure:
- Home Pages – Display only the home link when enabled
- Posts – Show Home > Category > Post Title hierarchy
- Pages – Display Home > Parent Page > Current Page structure
- Archives – Show Home > Archive Type (Category, Tag, etc.)
- Search Results – Display Home > Search Results
The block integrates with WordPress’s native hierarchy system and respects custom post type structures, ensuring accurate breadcrumb trails across your entire site.