Below you'll find a copy of the new updated version of the Shopify Breadcrumbs section with the following improvements:
- Breadcrumbs that display the path a user has taken through your site based on their session
- The ability to switch back and forth between the new path-based breadcrumb and the original navigation-based breadcrumb
- New improvements to the navigation-based breadcrumb to support menus with multiple levels of nesting such as drop down menus and mega menus
{%- style -%}
:root {
--svg_fill: {{ section.settings.breadcrumb_text_color}}
;
}
.home-icon-container {
display: inline-block;
margin-right: 4px;
vertical-align: sub;
}
.breadcrumbs {
color: {{ section.settings.breadcrumb_text_color }};
background-color: {{ section.settings.breadcrumb_bg_color }};
padding-top: 1rem;
padding-bottom: 1rem;
}
.breadcrumbs li {
display: inline-block;
}
.breadcrumbs a {
text-decoration: none;
/*Will put liquid customization here*/
font-size: 15px;
color: inherit;
}
{%- if section.settings.breadcrumb_accent_color_bool -%}
.breadcrumbs a:last-of-type {
color: {{ section.settings.breadcrumb_accent_color }}
!important;
}
{%- endif -%}
.breadcrumb-delimeter:not(:last-child):after {
{%- case section.settings.breadcrumb_delimeter -%}
{%- when "angle_right" -%}
content: "›";
font-size: 18px;
{%- when "slash" -%}
content: "/";
font-size: 16px;
{%- when "arrow_right" -%}
content: "➤";
font-size: 15px;
{%- when "squiggle_arrow" -%}
content: "\27FF";
font-size: 25px;
{%- when "right_long" -%}
content: "\279E";
font-size: 18px;
transform: translateY(5%);
{%- when "double_right" -%}
content: "\00BB";
font-size: 20px;
{%- when "diamond_arrow_head" -%}
content: "⤞";
font-size: 25px;
transform: translateY(5%);
{%- when "heavy_angle_right" -%}
content: "\276F";
font-size: 18px;
transform: translateY(5%);
{%- else -%}
{%- endcase -%}
display: inline-block;
margin-left: 0.75rem;
margin-right: 0.50rem;
speak: none;
}
.breadcrumbs [aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}
/*CSS For Session Based Breadcrumb*/
.session-breadcrumb{
margin-top: 1rem;
margin-bottom: 1rem;
}
.hide-home-icon, .hide-breadcrumbs{
display:none;
}
/*Responsive Styles for the Breadcrumb*/
{% if section.settings.swipable_breadcrumbs %}
@media screen and (max-width: 391px){
.breadcrumb-container{
width: 100;
overflow: hidden;
}
.swipable-breadcrumbs{
width: 100%;
height: 100%;
overflow-x: scroll;
white-space: nowrap;
}
}
{% endif %}
{%- endstyle -%}
{% if section.settings.breadcrumb_type == "navigation_based" %}
{% assign menu = section.settings.main_menu %}
<div class="breadcrumbs page-width swipable-breadcrumbs" aria-label="breadcrumbs">
{%- unless template == 'index' or template == 'cart' -%}
{%- if section.settings.breadcrumbs_home_icon_bool -%}
<div class="home-icon-container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-house-door-fill"
viewBox="0 0 16 16">
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
</svg>
</div>
{%- endif -%}
<a href="/" title="Home">Home</a>
{%- case template.name -%}
{% when 'page' %}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<!--Breadcrumb Delimeter -->
{{ page.title | link_to: page.url }}
{%- when 'article' -%}
{%- for link in menu.links -%}
{%- if link.url == blog.url -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<!--Breadcrumb Delimeter -->
{{ link.title | link_to: link.url }}
{% break %}
{%- endif -%}
{%- endfor -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
{%- when "product" -%}
{%- capture product_url_string -%}
{%- for collection in product.collections -%}
{{ collection.url }}|
{%- endfor -%}
{%- endcapture -%}
{%- assign object_url_string = product_url_string | append: product.url -%}
{%- assign object_urls = object_url_string | split: '|' -%}
{%- capture linklist_titles_str -%}
{%- for linklist in linklists -%}
{{ linklist.title | handleize }}|{%- endfor -%}
{%- endcapture -%}
{%- assign str_size = linklist_titles_str | size | minus: 1 -%}
{%- assign linklist_titles_str = linklist_titles_str | slice: 0, str_size -%}
{%- assign linklist_titles = linklist_titles_str | split: '|' -%}
{%- assign level = 1 -%}
{%- for link in menu.links -%}
{%- assign link_handle = link.title | handle -%}
{%- assign link_titles = link_titles | append: link.title | append: '|' -%}
{%- assign link_urls = link_urls | append: link.url | append: '|' -%}
{%- assign link_levels = link_levels | append: level | append: '|' -%}
{%- assign link_parents = link_parents | append: 'collections' | append: '|' -%}
{%- assign link_handles = link_handles | append: link_handle | append: '|' -%}
{%- if linklist_titles contains link_handle -%}
{%- for clink in linklists[link_handle].links -%}
{%- if forloop.first == true -%}
{%- assign level = level | plus: 1 -%}
{%- endif -%}
{% assign clink_handle = clink.title | handle %}
{%- assign link_titles = link_titles | append: clink.title | append: '|' -%}
{%- assign link_urls = link_urls | append: clink.url | append: '|' -%}
{%- assign link_levels = link_levels | append: level | append: '|' -%}
{%- assign link_parents = link_parents | append: link_handle | append: '|' -%}
{%- assign handle = link.title | handleize -%}
{%- assign link_handles = link_handles | append: clink_handle | append: '|' -%}
{%- if linklist_titles contains clink_handle -%}
{%- for gclink in linklists[clink_handle].links -%}
{%- if forloop.first == true -%}
{%- assign level = level | plus: 1 -%}
{%- endif -%}
{% assign gclink_handle = gclink.title | handle %}
{%- assign link_titles = link_titles | append: gclink.title | append: '|' -%}
{%- assign link_urls = link_urls | append: gclink.url | append: '|' -%}
{%- assign link_levels = link_levels | append: level | append: '|' -%}
{%- assign link_parents = link_parents | append: gclink_handle | append: '|' -%}
{%- assign link_handles = link_handles | append: gclink_handle | append: '|' -%}
{%- if forloop.last == true -%}
{%- assign level = level | minus: 1 -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if forloop.last == true -%}
{%- assign level = level | minus: 1 -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- comment -%} CONVERT TO ARRAYS {%- endcomment -%}
{%- assign str_size = link_levels | size | minus: 1 -%}
{%- assign llevels = link_levels | slice: 0, str_size | split: '|' -%}
{%- assign str_size = link_titles | size | minus: 1 -%}
{%- assign ltitles = link_titles | slice: 0, str_size | split: '|' -%}
{%- assign str_size = link_handles | size | minus: 1 -%}
{%- assign lhandles = link_handles | slice: 0, str_size | split: '|' -%}
{%- assign str_size = link_parents | size | minus: 1 -%}
{%- assign lparents = link_parents | slice: 0, str_size | split: '|' -%}
{%- assign str_size = link_urls | size | minus: 1 -%}
{%- assign lurls = link_urls | slice: 0, str_size | split: '|' -%}
{%- assign depth = '3' -%}
{%- assign bc3_parent_list_handle = '' %}
{%- for url in lurls -%}
{%- if object_urls contains url and llevels[forloop.index0] == depth -%}
{%- unless url == product.url or url == collection.url -%}
{%- capture bc3 -%}
{{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
{%- endunless -%}
{%- assign bc3_parent_list_handle = lparents[forloop.index0] -%}
{%- assign bc3_list_handle = lhandles[forloop.index0] -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- assign depth = '2' -%}
{%- assign bc2_parent_list_handle = '' %}
{%- if bc3_parent_list_handle == '' -%}
{%- for url in lurls -%}
{%- if llevels[forloop.index0] == depth -%}
{%- if object_urls contains url -%}
{%- unless url == product.url or url == collection.url -%}
{%- capture bc2 -%}
{{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
{% endunless %}
{%- assign bc2_parent_list_handle = lparents[forloop.index0] -%}
{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for list_handle in lhandles -%}
{%- if list_handle == bc3_parent_list_handle -%}
{% assign bc2_list_handle = list_handle %}
{%- assign bc2_parent_list_handle = lparents[forloop.index0] -%}
{%- assign bc2_list_title = ltitles[forloop.index0] -%}
{%- for bc2_sibling_link in linklists[bc2_parent_list_handle].links -%}
{%- assign bc2_sibling_title_handleized = bc2_sibling_link.title | handle -%}
{% if bc2_sibling_title_handleized == bc2_list_handle %}
{%- capture bc2 -%}
{{ bc2_sibling_link.title | link_to: bc2_sibling_link.url, bc2_sibling_link.title }}{%- endcapture -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- assign depth = depth | minus: 1 | append: '' -%}
{%- assign bc1_parent_list_handle = '' %}
{%- if bc2_parent_list_handle == '' -%}
{% for url in lurls %}
{%- if object_urls contains url and llevels[forloop.index0] == depth -%}
{%- unless url == product.url or url == collection.url -%}
{%- capture bc1 -%}
{{ ltitles[forloop.index0] | link_to: url, ltitles[forloop.index0] }}{%- endcapture -%}
{% endunless %}
{%- assign bc1_parent_list_handle = lparents[forloop.index0] -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- for list_handle in lhandles -%}
{%- if bc2_parent_list_handle == list_handle -%}
{% assign bc1_list_handle = list_handle %}
{%- assign bc1_parent_list_handle = lparents[forloop.index0] -%}
{%- assign bc1_title = ltitles[forloop.index0] -%}
{%- for bc1_sibling_link in linklists[bc1_parent_list_handle].links -%}
{%- assign bc1_sibling_title_handleized = bc1_sibling_link.title | handle -%}
{% if bc1_sibling_title_handleized == bc1_list_handle %}
{%- capture bc1 -%}
{{ bc1_sibling_link.title | link_to: bc1_sibling_link.url, bc1_sibling_link.title }}{%- endcapture -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% assign parent_title = blank %}
{% assign parent_link = blank %}
{% assign sub_title = blank %}
{% assign sub_link = blank %}
{% if bc2 == blank %}
{% assign bc3_sub_text = bc3 | strip_html %}
{%- for link in menu.links -%}
{%- assign link_handle = link.title | handle -%}
{%- assign link_titles = link_titles | append: link.title | append: '|' -%}
{%- assign link_urls = link_urls | append: link.url | append: '|' -%}
{%- assign link_levels = link_levels | append: level | append: '|' -%}
{%- assign link_parents = link_parents | append: 'collections' | append: '|' -%}
{%- assign link_handles = link_handles | append: link_handle | append: '|' -%}
{%- if linklist_titles contains link_handle -%}
{% comment %} <p>{{ link_handle }}</p> {% endcomment %}
{% assign parent_title = link.title %}
{% assign parent_link = link.url %}
{%- for clink in linklists[link_handle].links -%}
{% assign clink_handle = clink.title | handle %}
{%- assign clink_titles = link_titles | append: clink.title | append: '|' -%}
{%- assign clink_urls = link_urls | append: clink.url | append: '|' -%}
{%- assign clink_levels = link_levels | append: level | append: '|' -%}
{%- assign clink_parents = link_parents | append: link_handle | append: '|' -%}
{%- assign handle = link.title | handleize -%}
{%- assign clink_handles = link_handles | append: clink_handle | append: '|' -%}
{%- if linklist_titles contains clink_handle -%}
{% for sub in clink.links %}
{% if sub.title == bc3_sub_text %}
{% assign sub_title = clink.title %}
{% for item_linking in link.links %}
{% if item_linking.title == clink.title %}
{% assign sub_link = item_linking.url %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{% endif %}
{% if parent_link != blank %}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<!--Breadcrumb delimeter-->
<a href="{{ parent_link }}">
{{ parent_title | escape }}
</a>
{% endif %}
{% if sub_title != blank %}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<!--Breadcrumb delimeter-->
<a href="{{ sub_link }}">
{{ sub_title | escape }}
</a>
{% endif %}
{%- if bc1 -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<!--Breadcrumb Delimeter -->
{{ bc1 }}
{%- endif -%}
{%- if bc2 -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
{{ bc2 }}
{%- endif -%}
{%- if bc3 -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
{{ bc3 }}
{%- endif -%}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ product.url }}">{{ product.title }}</a>
{%- else -%}
{% comment %}
This part of the logic is for collections, blog (not articles) and policy pages
{% endcomment %}
<!-- Liquid Variables are available globally which is why I can use them outside for block scope-->
{% for link in menu.links %}
{% if link.title == page_title %}
{% assign is_in_main_menu = true %}
{% else %}
{% assign is_in_main_menu = false %}
{% endif %}
{% endfor %}
{% if is_in_main_menu == false %}
{% assign current_page = canonical_url %}
{% assign breadcrumb_found = false %}
{% for link in menu.links %}
{% if breadcrumb_found == false %}
{% if link.child_active or link.active and breadcrumb_found == false %}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<!--Breadcrumb delimeter-->
<a href="{{ link.url }}">
{{ link.title | escape }}
</a>
{% for clink in link.links %}
{% if clink.child_active or clink.active and breadcrumb_found == false %}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ clink.url }}">
{{ clink.title | escape }}
</a>
{% if current_page contains clink.url %}
{% assign breadcrumb_found = true %}
{% endif %}
{% for gclink in clink.links %}
{% if gclink.child_active or gclink.active and breadcrumb_found == false %}
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href="{{ gclink.url }}">
{{ gclink.title | escape }}
</a>
{% if current_page contains gclink.url %}
{% assign breadcrumb_found = true %}
{% endif %}
{% endif %}
{% if breadcrumb_found %}
{% break %}
{% endif %}
{%- endfor -%}
{% endif %}
{% if breadcrumb_found %}
{% break %}
{% endif %}
{%- endfor -%}
{% endif %}
{% endif %}
{%- endfor -%}
{% else %}
<!-- Fallback to catch any pages outside main menu -->
<span class="breadcrumb-delimeter" aria-hidden="true"></span>
<a href = "">{{ page_title }}</a href = "">
{% endif %}
{%- endcase -%}
{%- endunless -%}
</div>
{% endif %}
{% if section.settings.breadcrumb_type == "path_based" %}
<div class = "page-width session-breadcrumb breadcrumbs hide-breadcrumbs swipable-breadcrumbs">
<div class="home-icon-container hide-home-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-house-door-fill"
viewBox="0 0 16 16">
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
</svg>
</div>
</div>
<script>
// function initBreadcrumbs(){
// const navigationLinks = Array.from(document.getElementById("breadcrumbs").children)
// navigationLinks.forEach(link => {
// link.addEventListener("click", evt => {
// //Save the breadcrumb state
// breadcrumbStateSaver(evt.currentTarget.textContent)
// //show the breadcrumb
// showBreadcrumb()
// })
// })
// }
function breadcrumbStateSaver(link,text){
//check if browser can use storage API
// if(typeof storage == "undefined"){
// return
// }
const ignoreLinks = ["/", "/cart"]
const isInIgnore = ignoreLinks.find(arrLink => arrLink == link)
//Return if this is a link in the ignore links url
if(isInIgnore)return
const breadcrumbArr = JSON.parse(sessionStorage.getItem("breadcrumbArr")) || [];
// Check if the current link is the same as the last item in the array
const lastItem = breadcrumbArr[breadcrumbArr.length - 1];
const isConsecutiveDuplicate = lastItem?.link === link;
// If the link is already in storage but not consecutively, add it to the array
if (!isConsecutiveDuplicate) {
const newArrItem = {};
newArrItem.link = link;
newArrItem.text = text;
breadcrumbArr.push(newArrItem);
sessionStorage.setItem("breadcrumbArr", JSON.stringify(breadcrumbArr));
}
}
function showBreadcrumbs(includeHomeIcon = false) {
// Retrieve the breadcrumb array from session storage
const breadcrumbArr = JSON.parse(sessionStorage.getItem("breadcrumbArr") || "[]");
if(breadcrumbArr.length < 1) return
// Get the breadcrumb container element
const breadcrumbContainer = document.querySelector(".breadcrumbs")
//Show Breadcrumb container
breadcrumbContainer.classList.remove("hide-breadcrumbs")
// Create the home link element
const homeLink = document.createElement("a");
homeLink.href = "/";
homeLink.textContent = "Home";
// Create the home link delimiter
const homeDelimiter = document.createElement("span");
homeDelimiter.classList.add("breadcrumb-delimeter");
if(includeHomeIcon){
showHomeIcon()
}
breadcrumbContainer.appendChild(homeLink);
breadcrumbContainer.appendChild(homeDelimiter);
// Add event listener to reset session storage on home link click
homeLink.addEventListener("click", (event) => {
event.preventDefault();
resetSessionStorage();
});
// Iterate through the breadcrumb array and create breadcrumb items
Array.from(breadcrumbArr).forEach((crumb,index) => {
const breadcrumbItem = document.createElement("a");
breadcrumbItem.href = crumb.link;
breadcrumbItem.textContent = crumb.text;
// Add event listener to prevent default link behavior
breadcrumbItem.addEventListener("click", (event) => {
event.preventDefault();
// Update breadcrumb array and current page URL
updateBreadcrumbAndURL(index);
});
// Add breadcrumb item to the container
breadcrumbContainer.appendChild(breadcrumbItem);
// If it's not the last item, add a delimiter
if (index < breadcrumbArr.length - 1) {
const delimiter = document.createElement("span");
delimiter.classList.add("breadcrumb-delimeter");
breadcrumbContainer.appendChild(delimiter);
}
})
}
function updateBreadcrumbAndURL(clickedIndex) {
// Retrieve breadcrumb array from session storage
const breadcrumbArr = JSON.parse(sessionStorage.getItem("breadcrumbArr"));
// Slice the array to remove subsequent items
const slicedArr = breadcrumbArr.slice(0, clickedIndex + 1);
// Update breadcrumb array in session storage
sessionStorage.setItem("breadcrumbArr", JSON.stringify(slicedArr));
// Update current page URL
window.location.href = breadcrumbArr[clickedIndex].link;
}
function showHomeIcon(){
const homeIcon = document.querySelector(".home-icon-container.hide-home-icon")
homeIcon.classList.remove("hide-home-icon")
}
function resetSessionStorage(){
sessionStorage.clear()
window.location.href = "/"
}
document.addEventListener("DOMContentLoaded", () => {
const currentLink = window.location.pathname
const currentLinkText = "{{ page_title }}"
const useHomeIcon = JSON.parse('{{section.settings.breadcrumbs_home_icon_bool}}')
breadcrumbStateSaver(currentLink, currentLinkText)
showBreadcrumbs(useHomeIcon)
});
</script>
{% endif %}
<script defer>
const breadCrumbLinks = document.querySelectorAll(".breadcrumbs a")
const lastLink = breadCrumbLinks[breadCrumbLinks.length - 1]
lastLink.href = ""</script>
{% schema %}
{
"name": "Breadcrumb Navigation",
"class": "breadcrumb-container",
"settings": [
{
"type": "header",
"content": "Icon Settings"
},
{
"type": "checkbox",
"id": "breadcrumbs_home_icon_bool",
"label": "Use the home icon next to the Home link in the breadcrumb",
"default": true
},
{
"type": "select",
"id": "breadcrumb_delimeter",
"info": "The icon that is between every link in the breadcrumb",
"label": "Breadcrumb Delimeter Icon",
"options": [
{
"value": "angle_right",
"label": "Angle Right"
},
{
"value": "slash",
"label": "Slash"
},
{
"value": "arrow_right",
"label": "Arrow Right"
},
{
"value": "squiggle_arrow",
"label": "Squiggle Arrow"
}, {
"value": "right_long",
"label": "Right Long"
}, {
"value": "double_right",
"label": "Double Right"
}, {
"value": "diamond_arrow_head",
"label": "Diamond Arrow Head"
}, {
"value": "heavy_angle_right",
"label": "Heavy Angle Right"
}
],
"default": "angle_right"
},
{
"type": "header",
"content": "Breadcrumb Type Settings"
},
{
"type": "select",
"label": "Use Navigation or Path Based Breadcrumbs",
"id": "breadcrumb_type",
"options": [
{
"label": "Path Based",
"value": "path_based"
},
{
"label": "Navigation Based",
"value": "navigation_based"
}
],
"default": "navigation_based"
},
{
"type": "link_list",
"label": "Which Menu to Base Breadcrumb on?",
"info": "Only used with Navigation-based breadcrumb",
"id": "main_menu"
},
{
"type": "checkbox",
"id": "swipable_breadcrumbs",
"label":"Make the Breadcrumbs Swipeable on Mobile",
"default": false
},
{
"type": "header",
"content": "Color Settings"
}, {
"type": "color_background",
"id": "breadcrumb_bg_color",
"label": "Breadcrumb Background Color",
"info": "Change the Background Color of the breadcrumb. Be sure to pick something that will have a nice color contrast from the color of the text",
"default": "#fff"
}, {
"type": "color",
"id": "breadcrumb_text_color",
"label": "Breadcrumb Color",
"default": "#465076"
}, {
"type": "checkbox",
"id": "breadcrumb_accent_color_bool",
"label": "Enable accent color for last link in breadcrumb",
"info": "By checking this checkbox, you are adding an accent color to the last link in your breadcrumb navigaiton.",
"default": false
}, {
"type": "color",
"id": "breadcrumb_accent_color",
"label": "Current Page Accent Color",
"default": "#4770db"
}
],
"presets": [
{
"name": "Breadcrumb Navigation"
}
]
}
{% endschema %}