Component Library

Breadcrumb: Top Level Pages 

<nav class="iastate22-breadcrumb iastate22-breadcrumb--top-level-pages" aria-label="Breadcrumb">
    <ol class="iastate22-breadcrumb__list">
        <li>
            <a href="https://www.iastate.edu/">Home</a>
        </li>
        <li>
            <a href="https://www.iastate.edu/">Parent Page</a>
        </li>
        <li>
            <a href="https://www.iastate.edu/" aria-current="page">Kitchen Sink</a>
        </li>
    </ol>
</nav>
 
<nav class="iastate22-breadcrumb iastate22-breadcrumb--top-level-pages" aria-label="Breadcrumb">
	<ol class="iastate22-breadcrumb__list">
		{% for link in links %}
			<li>
				<a href="{{ link.url }}"{% if loop.last %} aria-current="page"{% endif %}>{{ link.name }}</a>
			</li>
		{% endfor %}
	</ol>
</nav>
 
{
  "links": [
    {
      "url": "https://www.iastate.edu/",
      "name": "Home"
    },
    {
      "url": "https://www.iastate.edu/",
      "name": "Parent Page"
    },
    {
      "url": "https://www.iastate.edu/",
      "name": "Kitchen Sink"
    }
  ]
}
  • Content: 
    .iastate22-breadcrumb {
  margin: rem(18) 0 rem(8);
  padding: 0;
}

.iastate22-breadcrumb__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0;

  a {
    font-weight: 700;
    font-family: $typeface-sans-serif;
    font-size: rem(18);
    line-height: (34 / 18);
    color: $iastate-maroon;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: rem(1);
    text-underline-offset: rem(1);
    transition: 0.2s border ease-in-out, 0.2s color ease-in-out;
    &:hover,
    &:focus {
      border-bottom-width: 2px;
      color: $iastate-red;
    }
    &[aria-current="page"] {
      text-decoration: none;
      pointer-events: none;
    }
  }

  li {
    display: none;
    position: relative;
    margin-right: rem(24);
    &:not(:last-child) {
      &:after {
        content: "";
        position: absolute;
        top: rem(12);
        right: rem(-15);
        width: rem(8);
        height: rem(8);
        border-right: rem(2) solid $iastate-maroon;
        border-bottom: rem(2) solid $iastate-maroon;
        transform: rotate(-45deg);
      }
    }
    @include media-breakpoint-up(md) {
      display: inline-block;
    }
    &:nth-last-child(2) {
      display: inline-block;
      padding-left: rem(13);
      @include media-breakpoint-up(md) {
        padding-left: initial;
      }
      &:after {
        right: initial;
        left: 0;
        transform: rotate(135deg);
        @include media-breakpoint-up(md) {
          right: rem(-15);
          left: initial;
          transform: rotate(-45deg);
        }
      }
    }
  }
}
  • URL: /components/raw/breadcrumb/_breadcrumb.scss
  • Filesystem Path: src/components/breadcrumb/_breadcrumb.scss
  • Size: 1.6 KB

Breadcrumb

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • There are two variations for the breadcrumbs, the only difference between the two is the way they display on mobile. For the default version, the full path is listed out and for the breadcrumb--top-level-pages version, only the parent page link is shown on mobile. On desktop they are identical.
  • The custom styles are imported into the index.scss file as @import "../components/breadcrumb/breadcrumb";