Davidson Styleguide

Breadcrumbs 

<!-- Default -->
<div class="breadcrumb ">
    <nav role="navigation" aria-labelledby="system-breadcrumb">
        <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
        <ul class="piped">
            <li><a href="http://www.example.com/" class="">Home</a>
            </li>
            <li><a href="http://www.example.com/" class="">Main Landing Page</a>
            </li>
            <li><a href="http://www.example.com/" class="">Probably a Routing Page</a>
            </li>
            <li><a href="http://www.example.com/" class="">This page's parent</a>
            </li>
        </ul>
    </nav>
</div>


<!-- Full Width -->
<div class="breadcrumb breadcrumb--full">
    <nav role="navigation" aria-labelledby="system-breadcrumb">
        <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
        <ul class="piped">
            <li><a href="http://www.example.com/" class="">Home</a>
            </li>
            <li><a href="http://www.example.com/" class="">Main Landing Page</a>
            </li>
            <li><a href="http://www.example.com/" class="">Probably a Routing Page</a>
            </li>
            <li><a href="http://www.example.com/" class="">This page's parent</a>
            </li>
        </ul>
    </nav>
</div>


{% if breadcrumbs is not empty %}
<div class="breadcrumb {{ breadcrumbs.variant }}">
  <nav role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
    <ul class="piped">
    {% for crumb in breadcrumbs.items %}
      <li>{% include '@link' with { link: crumb.link } %}</li>
    {% endfor %}
    </ul>
  </nav>
</div>
{% endif %}
 
/* Default */
{
  "breadcrumbs": {
    "items": [
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Home"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Main Landing Page"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Probably a Routing Page"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "This page's parent"
        }
      }
    ]
  }
}


/* Full Width */
{
  "breadcrumbs": {
    "items": [
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Home"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Main Landing Page"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Probably a Routing Page"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "This page's parent"
        }
      }
    ],
    "variant": "breadcrumb--full"
  }
}
  • Content: 
    // "Local tasks" is not shown in Fractal
// but is a Drupal administrative component
.breadcrumb {
  @include rr-font-compute(s, medium);
  @include rr-break-directive(l) {
    overflow: hidden;
  }

  nav {
    @include rr-slab-wrapper;
    @include autoscheme(color(davidson-black));
    padding: rr-gridbase() rr-gridbase(4);

    @include rr-break-directive(l) {
      @include faux-touch-edge($touch-color: color(davidson-black), $side: 'right');
    }

    a {
      transition: color $transition-time $transition-easing;
      &:link,
      &:visited {
        color: color('gray-light');
        text-decoration: none;
      }
      &:hover,
      &:active {
        color: color('davidson-white');
        text-decoration: underline;
      }
    }
  }

  .piped {
    li {
      &::after {
        margin-right: .3em;
        margin-left: .3em;
        content: '/';
      }
    }
  }
}


// targeting page-header-prefix attempts to use full breadcrumbs on
// news detail and person-profile pages
.page-header-prefix .breadcrumb,
.breadcrumb.breadcrumb--full {
  background-color: color(davidson-black);
  nav {
    &:before {
      display: none;
    }
  }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: patterns/molecules/navigation/breadcrumbs/breadcrumbs.scss
  • Size: 1.2 KB

Breadcrumbs

Breadcrumbs are used to help orient users within a site navigation tree. These can be fairly tricky to integrate unless the site structure is a strict tree, so be sure to leave plenty of time to figure out how this is supposed to work.