Smarter Breadcrumbs with Layout Lists
Tags: expressionengine, eecms
Published: 2018-01-23 15:11:00

---
title: Smarter Breadcrumbs with Layout Lists
published: true
date: 2018-01-23 15:11:00 UTC
tags: ExpressionEngine,eecms
canonical_url: https://u.expressionengine.com/article/smarter-breadcrumbs-with-layout-lists
cover_image: https://u.expressionengine.com/asset/article-images/smarter-breadcrumbs.png
---
[Layout List variables](https://docs.expressionengine.com/latest/templates/layouts.html#dynamic-variables-lists) 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](https://startbootstrap.com/template-overviews/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](http://schema.org/) [BreadcrumbList](http://schema.org/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>
```