Breadcrumbs

Todo

  • Remove Drupal markup
  • Add dynamic variants

Breadcrumbs

Component Preview
<div class="region region-breadcrumbs">
    <div id="block-breadcrumbs" class="contextual-region block block-system block-system-breadcrumb-block">
        <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
            <ol>
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">Undergraduate Programs</a>
                </li>
                <li>
                    Major and Minors</li>
            </ol>
        </nav>
    </div>
</div>
  • Content:
    .breadcrumb ol {
      list-style-type: none;
      padding: 0;
      margin: 0; }
      .breadcrumb ol > li {
        display: inline-block;
        list-style-type: none;
        margin: 0; }
    
    .breadcrumb {
      list-style: none;
      margin-top: 0.625rem;
      margin-right: 0;
      margin-bottom: 0.625rem;
      margin-left: 0; }
    
    .breadcrumb::before,
    .breadcrumb::after {
      display: table;
      content: ' ';
      flex: 1 0 0;
      order: 1; }
    
    .breadcrumb::after {
      clear: both; }
    
    .breadcrumb li {
      float: left;
      cursor: default;
      color: var(--brand-secondary);
      font-size: 0.8rem; }
    
    .breadcrumb li:not(:last-child)::after {
      position: relative;
      content: "/";
      opacity: 1;
      color: var(--brand-primary);
      margin-top: 0;
      margin-right: 0.625rem;
      margin-bottom: 0;
      margin-left: 0.625rem; }
    
    .breadcrumb a {
      text-decoration: none;
      color: var(--brand-secondary); }
    
    .breadcrumb a:hover,
    .breadcrumb a:focus {
      text-decoration: underline; }
    
    .breadcrumb .disabled {
      cursor: not-allowed;
      color: #cacaca; }
    
  • URL: /components/raw/breadcrumbs/breadcrumbs.css
  • Filesystem Path: src/components/breadcrumbs/breadcrumbs.css
  • Size: 980 Bytes
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    /////// Breadcrumbs
    
    .breadcrumb {
      list-style: none;
      @include margin($top: $sm, $right: 0, $bottom: $sm, $left:0);
        ol {
          @extend %no-ul-list;
        }
    }
    
    .breadcrumb::before,
    .breadcrumb::after {
      display: table;
      content: ' ';
      @include flex($fb: 0);
      @include order($int: 1);
    }
    
    .breadcrumb::after {
      clear: both;
    }
    
    .breadcrumb li {
      float: left;
      cursor: default;
      //text-transform: uppercase;
      color: $secondary;
      font-size: $small-font-size;
    }
    
    .breadcrumb li:not(:last-child)::after {
      position: relative;
      content: "/";
      opacity: 1;
      color: $primary;
      @include margin($top: 0, $right: $sm, $bottom: 0, $left:$sm);
    }
    
    .breadcrumb a {
      text-decoration: none;
      color: $secondary;
    }
    
    .breadcrumb a:hover,
    .breadcrumb a:focus {
      text-decoration: underline;
    }
    
    .breadcrumb .disabled {
      cursor: not-allowed;
      color: $grey-light;
    }
    
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: src/components/breadcrumbs/breadcrumbs.scss
  • Size: 941 Bytes