Breadcrumbs can be customized in some fun ways including linking the categories, replacing / with > or another character, etc.
How To - Link the Category to a a Landing Page, and Replace / with |
Paste the attached script into the large function in your scripts.js file. Edit as needed for your category/subcategory names. You will also note that the automatic “/” in between the category & sub-category has been manually replaced with a “|”, wrapped in a span for styling.
$('.breadcrumbs .page-category').each(function () {
if ($(this).text() == 'Banking') {
$(this).html('<a href="/banking">Banking</a>');
} else if ($(this).text() == 'Banking/Checking') {
$(this).html('<a href="/banking">Banking</a><span class="divider">|</span><a href="/banking/checking">Checking</a>');
} else if ($(this).text() == 'Banking/Savings') {
$(this).html('<a href="/banking">Banking</a><span class="divider">|</span><a href="/banking/savings">Savings</a>');
} /// repeat as needed
});
Example Sites
- Credit Union West (Category and subcategory are both linked to their associated landing pages within the breadcrumbs)
- Bank of Washington 2024 remake (Uses BS5, script uses vanilla JS)
Tags: bs2, bs3, bs4, bs5, scss, sass, script, js, javascript, jquery, breadcrumbs, menu