Skip to documentation content

Breadcrumbs

All complete examples

Demonstrate Breadcrumbs.

What this example teaches

  • Reuse the Breadcrumbs theme partial across pages
  • Keep custom fields on the template that owns them

View this pattern on the live demo site

Files

One breadcrumb link; pages include this from the breadcrumbs template.

Liquid
{% 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 -%}