University of Derby

Breadcrumbs 

<!-- Default -->
<nav aria-label="Breadcrumb links" class="breadcrumbs">
    <ol class="breadcrumbs-container">
        <li class="breadcrumbs-item">
            <a href="#">International</a>
            <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
        <li class="breadcrumbs-item">
            <a href="#">Fees and funding</a>
            <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
        <li class="breadcrumbs-item">
            <a href="#">Scholarships and bursaries</a>
        </li>
    </ol>
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@id": "#",
                    "name": "International"
                }
            }, {
                "@type": "ListItem",
                "position": 2,
                "item": {
                    "@id": "#",
                    "name": "Fees and funding"
                }
            }, {
                "@type": "ListItem",
                "position": 3,
                "item": {
                    "@id": "#",
                    "name": "Scholarships and bursaries"
                }
            }]
        }
    </script>
</nav>


<!-- Blue (default) -->
<!-- Start: For the purposes of demo only -->
<style>
    .wrapper-default {
        padding: 1em;
    }
</style>
<!-- End: For the purposes of demo only -->
<div class="wrapper-default">
    <nav aria-label="Breadcrumb links" class="breadcrumbs">
        <ol class="breadcrumbs-container">
            <li class="breadcrumbs-item">
                <a href="#">International</a>
                <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
            <li class="breadcrumbs-item">
                <a href="#">Fees and funding</a>
                <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
            <li class="breadcrumbs-item">
                <a href="#">Scholarships and bursaries</a>
            </li>
        </ol>
        <script type="application/ld+json">
            {
                "@context": "http://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [{
                    "@type": "ListItem",
                    "position": 1,
                    "item": {
                        "@id": "#",
                        "name": "International"
                    }
                }, {
                    "@type": "ListItem",
                    "position": 2,
                    "item": {
                        "@id": "#",
                        "name": "Fees and funding"
                    }
                }, {
                    "@type": "ListItem",
                    "position": 3,
                    "item": {
                        "@id": "#",
                        "name": "Scholarships and bursaries"
                    }
                }]
            }
        </script>
    </nav>
</div>


<!-- White -->
<!-- Start: For the purposes of demo only -->
<style>
    .wrapper-white {
        background: #101d49;
        padding: 1em;
    }
</style>
<!-- End: For the purposes of demo only -->
<div class="wrapper-white">
    <nav aria-label="Breadcrumb links" class="breadcrumbs white">
        <ol class="breadcrumbs-container">
            <li class="breadcrumbs-item">
                <a href="#">International</a>
                <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
            <li class="breadcrumbs-item">
                <a href="#">Fees and funding</a>
                <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
            <li class="breadcrumbs-item">
                <a href="#">Scholarships and bursaries</a>
            </li>
        </ol>
        <script type="application/ld+json">
            {
                "@context": "http://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [{
                    "@type": "ListItem",
                    "position": 1,
                    "item": {
                        "@id": "#",
                        "name": "International"
                    }
                }, {
                    "@type": "ListItem",
                    "position": 2,
                    "item": {
                        "@id": "#",
                        "name": "Fees and funding"
                    }
                }, {
                    "@type": "ListItem",
                    "position": 3,
                    "item": {
                        "@id": "#",
                        "name": "Scholarships and bursaries"
                    }
                }]
            }
        </script>
    </nav>
</div>


<!-- Black -->
<!-- Start: For the purposes of demo only -->
<style>
    .wrapper-black {
        background: #ee313e;
        padding: 1em;
    }
</style>
<!-- End: For the purposes of demo only -->
<div class="wrapper-black">
    <nav aria-label="Breadcrumb links" class="breadcrumbs black">
        <ol class="breadcrumbs-container">
            <li class="breadcrumbs-item">
                <a href="#">International</a>
                <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
            <li class="breadcrumbs-item">
                <a href="#">Fees and funding</a>
                <i class="uod-icons uod-icons-separator breadcrumbs-separator"></i> </li>
            <li class="breadcrumbs-item">
                <a href="#">Scholarships and bursaries</a>
            </li>
        </ol>
        <script type="application/ld+json">
            {
                "@context": "http://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": [{
                    "@type": "ListItem",
                    "position": 1,
                    "item": {
                        "@id": "#",
                        "name": "International"
                    }
                }, {
                    "@type": "ListItem",
                    "position": 2,
                    "item": {
                        "@id": "#",
                        "name": "Fees and funding"
                    }
                }, {
                    "@type": "ListItem",
                    "position": 3,
                    "item": {
                        "@id": "#",
                        "name": "Scholarships and bursaries"
                    }
                }]
            }
        </script>
    </nav>
</div>


<!-- Default -->
<nav aria-label="Breadcrumb links" class="breadcrumbs{% if scheme %} {{ scheme }}{% endif %}">
    <ol class="breadcrumbs-container">
        {% for index, link in links %}
        <li class="breadcrumbs-item">
            <a href="{{ link.href }}">{{ link.label }}</a>
            {% if index != (links.length - 1) %}<i class="uod-icons uod-icons-separator breadcrumbs-separator"></i>{% endif %}
        </li>
        {% endfor %}
    </ol>
    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [{% for index, link in links %}
        {
          "@type": "ListItem",
          "position": {{ index + 1 }},
          "item": {
            "@id": "{{ link.href }}",
            "name": "{{ link.label }}"
          }
        }{% if index != (links.length - 1) %},{% endif %}{% endfor %}]
    }
    </script>
</nav>

<!-- Blue (default) -->
<!-- Start: For the purposes of demo only -->
<style>
    .wrapper-default {
        padding: 1em;
    }
</style>
<!-- End: For the purposes of demo only -->
<div class="wrapper-default">
{% include '@breadcrumbs' %}
</div>

<!-- White -->
<!-- Start: For the purposes of demo only -->
<style>
    .wrapper-white {
        background:#101d49;
        padding: 1em;
    }
</style>
<!-- End: For the purposes of demo only -->
<div class="wrapper-white">
{% include '@breadcrumbs' %}
</div>

<!-- Black -->
<!-- Start: For the purposes of demo only -->
<style>
    .wrapper-black {
        background:#ee313e;
        padding: 1em;
    }
</style>
<!-- End: For the purposes of demo only -->
<div class="wrapper-black">
{% include '@breadcrumbs' %}
</div>
 
/* Default */
{
  "links": [
    {
      "label": "International",
      "href": "#"
    },
    {
      "label": "Fees and funding",
      "href": "#"
    },
    {
      "label": "Scholarships and bursaries",
      "href": "#"
    }
  ]
}


/* Blue (default) */
{
  "links": [
    {
      "label": "International",
      "href": "#"
    },
    {
      "label": "Fees and funding",
      "href": "#"
    },
    {
      "label": "Scholarships and bursaries",
      "href": "#"
    }
  ]
}


/* White */
{
  "links": [
    {
      "label": "International",
      "href": "#"
    },
    {
      "label": "Fees and funding",
      "href": "#"
    },
    {
      "label": "Scholarships and bursaries",
      "href": "#"
    }
  ],
  "scheme": "white"
}


/* Black */
{
  "links": [
    {
      "label": "International",
      "href": "#"
    },
    {
      "label": "Fees and funding",
      "href": "#"
    },
    {
      "label": "Scholarships and bursaries",
      "href": "#"
    }
  ],
  "scheme": "black"
}
  • Content: 
    .breadcrumbs {
    @include small-body-font;

    width: 100%;

    a {
        @include underline-only-on-hover;
    }

    &-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
    }

    &-item {
        margin: 0;

        &::before {
            display: none;
        }
    }

    &-separator {
        margin: -.2em .5em 0 .2em;
        vertical-align: middle;
        color: $dark-grey;

        .white &,
        .black & {
            @include link-colour($white);
        }
    }

    &.black a {
        @include link-colour($black);
    }

    &.white a {
        @include link-colour($white);
    }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: components/atoms/breadcrumbs/breadcrumbs.scss
  • Size: 691 Bytes

Breadcrumbs Component

Breadcrumbs should be displayed on any page below the second level of heirarchy. The first item in the breadcrumb should be the section they are in (eg. academic research) and the subsequent items are the pages along to the current path, not including the current page.

Breadcrumbs can adopt a colour scheme to match the surrounding page and accessibility requirements. They are either blue, black or white links depending on the colour scheme in use.

Key Features

  • Three colour schemes:
    • default (blue links),
    • white (white links),
    • black (black links, white dividers)
  • ARIA Metadata

Properties

  • scheme [Optional, string, “black”, “white” or undefined]
  • links [Array of LinkObject]

LinkObject

  • label [required, string]
  • href [required, string]