Smarter Breadcrumbs with Layout Lists

By Robin Sowell · January 23, 2018 · Read in 2 minutes.

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>

Robin Sowell

Robin got involved with EllisLab in 2002, using pMachine Pro to build a personal site. Since then, her casual interest has grown into an obsession and she enjoys nothing more than seeing what new…

Smarter Breadcrumbs with Layout Lists

Comments 1

giovanni