foundation/stylus/foundation/components/breadcrumbs.styl

You may also want to checkout:

//
// Breadcrumb Variables
//
$include-html-nav-classes ?= $include-html-classes;

// We use this to set the background color for the breadcrumb container.
$crumb-bg ?= lighten($secondary-color, 5%);

// We use these to set the padding around the breadcrumbs.
$crumb-padding ?= emCalc(6px) emCalc(14px) emCalc(9px);
$crumb-side-padding ?= emCalc(12px);

// We use these to control border styles.
$crumb-function-factor ?= 10%;
$crumb-border-size ?= 1px;
$crumb-border-style ?= solid;
$crumb-border-color ?= darken($crumb-bg, $crumb-function-factor);
$crumb-radius ?= $global-radius;

// We use these to set various text styles for breadcrumbs.
$crumb-font-size ?= emCalc(11px);
$crumb-font-color ?= $primary-color;
$crumb-font-color-current ?= #333;
$crumb-font-color-unavailable ?= #999;
$crumb-font-transform ?= uppercase;
$crumb-link-decor ?= underline;

// We use these to control the slash between breadcrumbs
$crumb-slash-color ?= #aaa;
$crumb-slash ?= "/";

//
// Breakcrumb Mixins
//

// We use this mixin to create a container around our breadcrumbs
crumb-container() {
  display: block;
  padding: $crumb-padding;
  overflow: hidden;
  margin-{$default-float}: 0;
  list-style: none;
  border-style: $crumb-border-style;
  border-width: $crumb-border-size;

  // We control which background color and border come through.
  background-color: $crumb-bg;
  border-color: $crumb-border-color;
}

// We use this mixin to create breadcrumb styles from list items.
crumbs() {

  // A normal state will make the links look and act like clickable breadcrumbs.
  margin: 0;
  float: $default-float;
  font-size: $crumb-font-size;
  text-transform: $crumb-font-transform;
  color: $crumb-font-color;

  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }

  a,
  span {
    text-transform: $crumb-font-transform;
    color: $crumb-font-color;
  }

  // Current is for the link of the current page
  &.current {
    cursor: $cursor-default-value;
    color: $crumb-font-color-current;
    a {
      cursor: $cursor-default-value;
      color: $crumb-font-color-current;
    }

    &:hover a,
    &:focus a { text-decoration: none; }
  }

  // Unavailable removed color and link styles so it looks inactive.
  &.unavailable {
    color: $crumb-font-color-unavailable;
    a { color: $crumb-font-color-unavailable; }

    &:hover,
    &:hover a,
    &:focus,
    a:focus {
      text-decoration: none;
      color: $crumb-font-color-unavailable;
      cursor: $cursor-default-value;
    }
  }

  &:before {
    content: '"' + $crumb-slash + '"';
    color: $crumb-slash-color;
    margin: 0 $crumb-side-padding;
    position: relative;
    top: 1px;
  }

  &:first-child:before {
    content: " ";
    margin: 0;
  }

}


if $include-html-nav-classes != false {

  /* Breadcrumbs */
  .breadcrumbs {
    crumb-container();
    radius($crumb-radius);

    li {
      crumbs();
    }
  }

}