Phi Phan

This is a single-block plugin for the breadcrumb trail. It’s simple, lightweight, SEO-friendly, and WooCommerce compatibility. It also includes some simple separator icons. It works everywhere: Page Editor, Site Editor, and template files.
<h3>How to customize the breadcrumb</h3>
<ol>
<li>
How to change/remove an item?
<pre><code>add_filter( 'breadcrumb_block_get_item', function ( $item_args, $context, $breadcrumbs_instance ) {
 // Ignore items without context.
 if ( ! $context || ! ( $context['object'] ?? false ) ) {
 return $item_args;
 }

 // Eg: remove a term.
 if ( 'term' === ( $context['type'] ?? '' ) && 'term-slug' === $context['object']->slug ) {
 return false;
 }

 // Eg: Change the title of a page.
 if ( 'page' === ( $context['type'] ?? '' ) && page_id_to_change === $context['object']->ID ) {
 $item_args[0] = 'Make it shorter';
 }

 return $item_args;
}, 10, 3 );
</code></pre>
$item_args is a 3-item array: <code>[$item_label, $item_link, $item_attrs]</code> 
$context is an associative array: <code>['type' => 'item type', 'object' => 'item object']</code>. <code>type</code> can be one of the following values: <code>front_page</code>, <code>home</code>, <code>shop</code>, <code>page</code>, <code>post</code>, <code>single</code>, <code>term</code>, <code>taxonomy</code>, <code>post_type_archive</code>, <code>search</code>, <code>404</code>, <code>paged</code>, <code>author</code>, <code>date_year</code>, <code>date_month</code>, <code>date_day</code>, <code>attachment</code>.
</li>
<li>
How to change the markup of the block?
<pre><code>add_filter( 'breadcrumb_block_get_breadcrumb_trail', function ( $markup, $args, $breadcrumbs_instance ) {
 return $markup;
}, 10, 3 );
</code></pre>
</li>
<li>
How to add or remove the items from the breadcrumb trail?
<pre><code>add_filter( 'breadcrumb_block_get_items', function ( $items, $breadcrumbs_instance ) {
 return $items;
}, 10, 2 );
</code></pre>
</li>
<li>
How to use a custom separator for the breadcrumb trail?
<pre><code>add_filter( 'breadcrumb_block_get_args', function ( $args ) {
 // For example, change separator.
 $args['separator'] = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/></svg>';
 return $args;
} );
</code></pre>
The custom separator should be an inline SVG. To make sure it displays properly, it should have three attributes: width, height, and fill. The values of these attributes should be as follows: <code>fill="currentColor" width="1em" height="1em"</code>. 
Using this hook, you can customize other attributes such as container, before, after, list_tag, item_tag, item_before, item_after, separator.
</li>
<li>
How to prepend the blog page to all single posts?
<pre><code>add_action( 'breadcrumb_block_single_prepend', function ( $post, $breadcrumbs_instance ) {
 if ( 'post' === $post->post_type ) {
 $blog_id = get_option( 'page_for_posts');
 if ( $blog_id ) {
 $breadcrumbs_instance->add_item( get_the_title( $blog_id ), get_permalink( $blog_id ) );
 }
 }
}, 10, 2 );
</code></pre>
</li>
</ol>
If this plugin is useful for you, please do a quick review and <a href="https://wordpress.org/support/plugin/breadcrumb-block/reviews/#new-post" rel="ugc">rate it</a> on WordPress.org to help us spread the word. I would very much appreciate it.
Please check out my other plugins if you’re interested:
<ul>
<li><a href="https://wordpress.org/plugins/content-blocks-builder" rel="ugc">Content Blocks Builder</a> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.</li>
<li><a href="https://wordpress.org/plugins/display-a-meta-field-as-block" rel="ugc">Meta Field Block</a> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.</li>
<li><a href="https://wordpress.org/plugins/svg-block" rel="ugc">SVG Block</a> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.</li>
<li><a href="https://wordpress.org/plugins/icon-separator" rel="ugc">Icon separator</a> – A tiny block just like the core/separator block but with the ability to add an icon.</li>
<li><a href="https://wordpress.org/plugins/block-enhancements" rel="ugc">Block Enhancements</a> – Adds practical features to blocks like icons, box shadows, transforms, etc.</li>
<li><a href="https://wordpress.org/plugins/counting-number-block" rel="ugc">Counting Number Block</a> – A block to display numbers with a counting effect</li>
<li><a href="https://wordpress.org/plugins/better-youtube-embed-block" rel="ugc">Better YouTube Embed Block</a> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.</li>
</ul>
The plugin is developed using @wordpress/create-block.

Breadcrumb Block


Thanks for developing such a useful and lightweight single-block plugin!


Perfect addition to the block editor!


This just works, beautifully. Does exactly what you need and with filters, you can customize it quite easily. Great support as well. Highly recommend.


Works beautifully, great support!

A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with Woocommerce

Taylor

Chris

<h3>For Full Documentation & The Latest Updates</h3>
<a href="https://github.com/Clark-Nikdel-Powell/Hansel-and-Gretel" rel="nofollow ugc">Watch us on GitHub!</a>
<h3>Where The Heck Am I?</h3>
Let’s face it: breadcrumbs are an integral part of websites these days. They give an immediate sense of hierarchy to your visitors and allow users to backtrack through your site to (hopefully) find more content. WordPress simplifies structuring sites how ever it seems reasonable, but it takes a bit more effort to generate breadcrumbs for all the different types of posts, and pages, and taxonomies, and archives, and … you get the idea.
<h3>But there are already plugins for that, aren’t there?</h3>
Sure! And a lot of them work really well for simple sites with simple hierarchies, but many of them fall short in one way or the other:
<blockquote>
Want to use the new semantic <code><nav></code> element? 
 Nope sorry, all they have are <code></code>‘s or <code><ul></code>‘s.
Need to control the classes or IDs of the crumbs? 
 Yep, nope; their wrapper has a fixed class of <code>breadcrumbs</code> though…I hope that’s all you need.
Uh…okay what about custom taxonomies? 
 You already know the answer to this question…
And custom post types? 
 Better hope they’re hierarchical!
Should I even bother mentioning rich snippets/microdata? 
 Haven’t found one yet.
</blockquote>
<h3>Okay fine, but what makes you think yours is any better?</h3>
It might be obvious (considering the previous section) that this plugin seeks to address all the customizability problems with the existing breadcrumb plugin environment while still keeping it as easy to use as possible (read: <code>HAG_Breadcrumbs();</code>, done!). It’s as simple as that. Hopefully it can live up to your expectations!
<h3>Features</h3>
The following features are currently available unless otherwise specifed.
<ul>
<li>
Simple Installation 
Upload the plugin, activate via the WordPress admin, and drop the function where you want the breadcrumbs to appear in your template. Done!
</li>
<li>
Fine-Tuned Control 
H&G works right out of the box, but oftentimes we want custom control. Nearly every aspect of the breadcrumbs rendering can be changed a’la the <a href="https://github.com/Clark-Nikdel-Powell/Hansel-and-Gretel#options" rel="nofollow ugc">myriad of options</a> available.
</li>
<li>
Microdata Integration 
H&G by default includes the microdata format for a <a href="http://schema.org/WebPage" rel="nofollow ugc">WebPage’s breadcrumbs</a>, a format that is jointly supported by <a href="http://www.bing.com/community/site_blogs/b/search/archive/2011/06/02/bing-google-and-yahoo-unite-to-build-the-web-of-objects.aspx" rel="nofollow ugc">Bing</a>, <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1211158" rel="nofollow ugc">Google</a>, <a href="http://developer.yahoo.com/blogs/ydn/posts/2011/06/introducing-schema-org-a-collaboration-on-structured-data/" rel="nofollow ugc">Yahoo!</a> and <a href="http://help.yandex.ru/webmaster/?id=1122752" rel="nofollow ugc">Yandex</a>.
</li>
<li>
Full Markup Control 
Choose any element to wrap your breadcrumbs, including optional class(es) or ID attributes. Likewise, you can include prefix and suffix content right inside the wrapper element tags for further control.
</li>
<li>
Template Hierarchy Based Rendering 
H&G utilizes the <a href="https://codex.wordpress.org/Template_Hierarchy" rel="nofollow ugc">WordPress Template Hierarchy</a> to determine which crumbs to show, including that elusive Comments Popup Window everybody (read: nobody) uses! This means, regardless of your theme, Hansel & Gretel will follow WP’s lead about the content on the page.
</li>
<li>
Custom Post Types & Taxonomies 
Never worry about how breadcrumbs behave across your fancy new post types and taxonomies. H&G accounts for hierarchical and non-hierarchical types, whether or not they have an archive page, and also provides options to override breadcrumb display for individual post types if desired.
</li>
<li>
Home & Last Crumbs 
H&G allows full control in showing home breadcrumbs and even allows for customized Front Page versus Blog Home Page templates. Likewise, the last, current page crumb has equal control depending on the needs of your theme.
</li>
<li>
Made for Theme Developers 
Hansel and Gretel was made by theme developers for theme developers. The default options and degree of customizability were all considered by our team of experienced WP developers to make sense right out of the box, with as little further customization as possible. Give it a try and let us know what you think. We all want H&G to be the simplest and smartest breadcrumb plugin you’ll ever use! To contribute to the development of this plugin, <a href="https://github.com/Clark-Nikdel-Powell/Hansel-and-Gretel" rel="nofollow ugc">fork our repo</a> over on GitHub.
</li>
</ul>

Hansel & Gretel: Fine-Tuned Breadcrumb Generator

Simple microdata-enabled breadcrumbs generator

Breadcrumb Block vs Hansel & Gretel: Fine-Tuned Breadcrumb Generator