Layout List variables make it easy to reuse content in a variety of ways.
Define the breadcrumb name, URL and position on your content templates:
{layout:set:append name='breadcrumb_urls'}{path='second'}{/layout:set:append}
{layout:set:append name='breadcrumb_titles'}Second crumb{/layout:set:append}
{layout:set:append name='breadcrumb_jsonld_positions'}2{/layout:set:append}
{layout:set:append name='breadcrumb_urls'}{path='active'}{/layout:set:append}
{layout:set:append name='breadcrumb_titles'}Active crumb{/layout:set:append}
{layout:set:append name='breadcrumb_jsonld_positions'}3{/layout:set:append}
Output it in whatever format you need on your layouts.
Bootstrap’s Modern Business template’s HTML breadcrumbs:
{layout:breadcrumb_urls}
{if count == 1}
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index">Home</a>
</li>
<li class="breadcrumb-item">
<a href="{value}">{layout:breadcrumb_titles index='{index}'}</a>
</li>
{if:elseif count < total_results}
<li class="breadcrumb-item">
<a href="{value}">{layout:breadcrumb_titles index='{index}'}</a>
</li>
{if:else}
<li class="breadcrumb-item active">
{layout:breadcrumb_titles index='{index}'}
</li>
</ol>
{/if}
{/layout:breadcrumb_urls}
A structured markup BreadcrumbList:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/index",
"name": "Home"
}
}
{layout:breadcrumb_urls}
,{
"@type": "ListItem",
"position": {layout:breadcrumb_jsonld_positions index='{index}'},
"item": {
"@id": "{value}",
"name": "{layout:breadcrumb_titles index='{index}'}"
}
}
{/layout:breadcrumb_urls}
]}
</script>
DRY, flexible, easy to maintain and update. Your final result will look like:
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index">Home</a>
</li>
<li class="breadcrumb-item">
<a href="second">Second crumb</a>
</li>
<li class="breadcrumb-item active">
Active crumb
</li>
</ol>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/index",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/second",
"name": "Second crumb"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/active",
"name": "Active crumb"
}
}]
}
</script>
Top comments (0)