Demonstrate Breadcrumbs.
View this pattern on the live demo site
One breadcrumb link; pages include this from the breadcrumbs template.
{% comment %}
Outputs a single page AND it's parent pages in the breadcrumbs.
This template is recursive so that each link can have a parent and the top-most parent is output first.
Inputs:
link - The page to display
max_depth - The maximum number of links to be output. Defaults to 5
is_current - True if link is the current page
Note: Each link is expected to have a parent_page property unless it is the root page for the breadcrumbs
{% endcomment -%}
{%- if link.is_valid -%}
{%- var max_depth = max_depth | to_int | default: 5 | at_most: 10 -%}
{%- if max_depth > 0 and link.parent_page is_valid -%}
{%- var next_depth = max_depth | minus: 1 -%}
{%- include '_breadcrumb_link.liquid' link:link.parent_page max_depth:next_depth is_current:false -%}
{%- endif -%}
<li class="breadcrumb-item{% if is_current %} active" aria-current="page{% endif %}">
{%- if is_current -%}
{{link.title}}
{%- else -%}
<a href="{{link.full_url}}">{{link.title}}</a>
{%- endif -%}
</li>
{%- endif -%}Walks the ancestor trail and prints the breadcrumb list.
{% comment %}
Renders a breadcrumb trail (home > parent > current), but requires that every page on the site define it's parent page.
Inputs:
max_depth - The maximum number of links to be output. Defaults to 5
Custom Fields:
show_breadcrumbs
parent_page (recommended even if show_breadcrumbs is off so that the breadcrumb trail still works for child pages)
{% endcomment -%}
{%- if entity.show_breadcrumbs.on and entity.parent_page.is_valid -%}
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
{%- include "_breadcrumb_link.liquid" link:entity is_current:true -%}
</ol>
</nav>
{%- endif -%}Custom fields owned by the breadcrumbs template.
[
{
"Type": "group",
"Fields": [
{
"Type": "toggle",
"DefaultValue": true,
"FieldID": "show_breadcrumbs",
"Label": "Show Breadcrumbs",
"OnValue": "show",
"OffValue": "hide",
"OnColor": "green",
"OffColor": "red",
"OnLabel": "Show",
"OffLabel": "Hide"
},
{
"Type": "entity",
"HasUrl": true,
"FieldID": "parent_page",
"Label": "Parent Page (for breadcrumb link)"
}
],
"Label": "Breadcrumbs"
}
]