foundation-sites/scss/components/_breadcrumbs.scss

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group breadcrumbs
////

/// Margin around a breadcrumbs container.
/// @type Number
$breadcrumbs-margin: 0 0 $global-margin 0 !default;

/// Font size of breadcrumb links.
/// @type Number
$breadcrumbs-item-font-size: rem-calc(11) !default;

/// Color of breadcrumb links.
/// @type Color
$breadcrumbs-item-color: $primary-color !default;

/// Color of the active breadcrumb link.
/// @type Color
$breadcrumbs-item-color-current: $black !default;

/// Opacity of disabled breadcrumb links.
/// @type Number
$breadcrumbs-item-color-disabled: $medium-gray !default;

/// Margin between breadcrumb items.
/// @type Number
$breadcrumbs-item-margin: 0.75rem !default;

/// If `true`, makes breadcrumb links uppercase.
/// @type Boolean
$breadcrumbs-item-uppercase: true !default;

/// If `true`, adds a seperator between breadcrumb links.
/// @type Boolean
$breadcrumbs-item-separator: true !default;

// If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
@if variable-exists(breadcrumbs-item-slash) {
  $breadcrumbs-item-separator: $breadcrumbs-item-slash;
}

/// Used character for the breadcrumb separator.
/// @type Content
$breadcrumbs-item-separator-item: '/' !default;

/// Used character for the breadcrumb separator in rtl mode.
/// @type Content
$breadcrumbs-item-separator-item-rtl: '\\' !default;

/// Color of breadcrumb item.
/// @type Color
$breadcrumbs-item-separator-color: $medium-gray !default;

// If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
@if variable-exists(breadcrumbs-item-slash-color) {
  $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
}

/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
@mixin breadcrumbs-container {
  @include clearfix;
  margin: $breadcrumbs-margin;
  list-style: none;

  // Item wrapper
  li {
    float: #{$global-left};

    font-size: $breadcrumbs-item-font-size;
    color: $breadcrumbs-item-color-current;
    cursor: default;

    @if $breadcrumbs-item-uppercase {
      text-transform: uppercase;
    }

    @if $breadcrumbs-item-separator {
      // Need to escape the backslash
      $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);

      &:not(:last-child)::after {
        position: relative;
        margin: 0 $breadcrumbs-item-margin;
        opacity: 1;
        content: $separator;
        color: $breadcrumbs-item-separator-color;
      }
    }
    @else {
      margin-#{$global-right}: $breadcrumbs-item-margin;
    }
  }

  // Page links
  a {
    color: $breadcrumbs-item-color;

    &:hover {
      text-decoration: underline;
    }
  }
}

@mixin foundation-breadcrumbs {
  .breadcrumbs {
    @include breadcrumbs-container;

    .disabled {
      color: $breadcrumbs-item-color-disabled;
      cursor: not-allowed;
    }
  }
}