<nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
    <ol class="content-container breadcrumb">
        <li><a href='#'>Stad.gent</a></li>
        <li><a href='#'>Overview</a></li>
        <li><span>Overview</span></li>
        <li><span>Overview</span></li>
        <li><span>Page title</span></li>
    </ol>
</nav>
<nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
  <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb' }}</h2>
  <ol class="content-container breadcrumb">
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
  </ol>
</nav>
{
  "items": [
    "<a href='#'>Stad.gent</a>",
    "<a href='#'>Overview</a>",
    "<span>Overview</span>",
    "<span>Overview</span>",
    "<span>Page title</span>"
  ]
}
  • Content:
    .breadcrumb {
      ul,
      ol {
        &.breadcrumb {
          display: none;
          margin: .5rem auto;
          list-style: none;
    
          @media (min-width: $bp-tablet) {
            display: block;
          }
    
          li {
            display: inline;
            margin-left: -.7rem;
            padding: 0 .7rem;
            font-size: .7rem;
    
            > * {
              padding: 0 .7rem;
            }
    
            a {
              padding: .4rem;
              border-radius: $radius-1;
              text-decoration: none;
    
              &:hover {
                background-color: $bg-hover-breadcrumb;
              }
            }
    
            &::after {
              @extend %icon-base-css;
              @extend %icon-caret;
              position: absolute;
              margin: .4rem .1rem;
              font-size: .8rem;
              font-weight: 700;
            }
    
            &:last-of-type {
              display: inline-block;
              font-weight: bold;
    
              &::after {
                display: none;
              }
            }
          }
        }
    
        &.nav--mobile-breadcrumb {
          display: block;
    
          @media (min-width: $bp-tablet) {
            display: none;
          }
        }
      }
    }
    
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: components/31-molecules/building-blocks/breadcrumbs/_breadcrumbs.scss
  • Size: 1.1 KB
  • Content:
    /**
     * @file
     * Javascript binding of breadcrumb.functions.js
     */
    
    'use strict';
    
    (function ($) {
      $(window).on('load', function (e) {
        this.gentStyleGuideBreadcrumb.updateMobileBreadcrumb();
      });
    
    })(jQuery);
    
  • URL: /components/raw/breadcrumbs/breadcrumbs.binding.js
  • Filesystem Path: components/31-molecules/building-blocks/breadcrumbs/breadcrumbs.binding.js
  • Size: 215 Bytes
  • Content:
    /**
     * @file
     * Breadcrumb handling and rendering.
     */
    
    // Breadcrumb namespace definition.
    
    'use strict';
    
    var gentStyleGuideBreadcrumb = {};
    
    (function ($) {
    
      /**
       * Replace the mobile breadcrumb of Gent base by our own.
       *
       * Adds this function to a global gentStyleBreadcrumb namespace.
       */
      gentStyleGuideBreadcrumb.updateMobileBreadcrumb = function () {
        var breadcrumb = $('ol.breadcrumb, ul.nav--breadcrumb, ul.breadcrumb');
        if (breadcrumb.length && !breadcrumb.hasClass('gentbe-processed')) {
          // Prevent duplicate processing by us or Gent base.
          breadcrumb.addClass('gentbe-processed');
          breadcrumb.addClass('mobile-breadcrumb-processed');
    
          // Remove the mobile breadcrumb of Gent base.
          $('select.nav--mobile-breadcrumb').remove();
    
          // Duplicate the original breadcrumb as mobile version.
          var mobile = breadcrumb.clone();
          mobile.removeAttr('id').addClass('nav--mobile-breadcrumb');
          breadcrumb.after(mobile);
    
          // Truncate the labels.
          truncateBreadcrumbLabels_(breadcrumb, 150);
          truncateBreadcrumbLabels_(mobile, 100);
    
          // Collapse the trail.
          collapseBreadcrumbTrail_(breadcrumb, 6);
          collapseBreadcrumbTrail_(mobile, 5, 1, 2);
        }
      };
    
      /**
       * Truncate the breadcrumb labels to a maximum length.
       *
       * @param {Object} breadcrumb
       *   The breadcrumb element as jQuery object.
       * @param {int} length
       *   Maximum length of a label.
       * @param {boolean} [ellipsis]
       *   Wether an elipsis should be added, defaults to true.
       */
      function truncateBreadcrumbLabels_(breadcrumb, length, ellipsis) {
        $('a, span', breadcrumb).each(function () {
          var element = $(this);
          var text = element.text().trim();
    
          if (text.length > length) {
            if (ellipsis !== false) {
              text = text.substr(0, (length - 3)).trim() + '...';
            }
            else {
              text = text.substr(0, length).trim();
            }
    
            element.text(text);
          }
        });
      }
    
      /**
       * Collapse the breadcrumb trail by hiding some elements.
       *
       * @param {Object} breadcrumb
       *   The breadcrumb element as jQuery object.
       * @param {int} min_length
       *   Only collapse if the trail has at least this many items.
       * @param {int} [head]
       *   Number of items to show at the start of the trail, defaults to 2.
       * @param {int} [tail]
       *   Number of items to show at the end of the trail, defaults to the same value as head.
       * @param {string} [text]
       *   Text to use as link to show the collapsed items, defaults to "...".
       */
      function collapseBreadcrumbTrail_(breadcrumb, min_length, head, tail, text) {
        // Set the default head and tail.
        if (head == null) {
          head = 2;
        }
    
        if (tail == null) {
          tail = head;
        }
    
        // Make sure we have a sensible minimum length.
        min_length = Math.max(min_length, (head + tail + 1));
    
        // Get the number of items.
        var length = $('li', breadcrumb).length;
    
        // Check if the trail has the minimum length.
        if (length >= min_length) {
          // Hide the items.
          for (var i = (head + 1); i <= (length - tail); i++) {
            $('li:nth-of-type(' + i + ')', breadcrumb).hide();
          }
    
          // Create the uncollapse  link.
          var link = $('<li>').append(
            $('<a>')
              .text(text ? text : '...')
              .attr('href', '#')
              .click(function (e) {
                e.preventDefault();
    
                $(this).parent().remove();
                $('li', breadcrumb).show();
              })
          );
    
          // Add it.
          if (head) {
            $('li:nth-of-type(' + head + ')', breadcrumb).after(link);
          }
          else {
            breadcrumb.prepend(link);
          }
        }
      }
    })(jQuery);
    
  • URL: /components/raw/breadcrumbs/breadcrumbs.functions.js
  • Filesystem Path: components/31-molecules/building-blocks/breadcrumbs/breadcrumbs.functions.js
  • Size: 3.7 KB

There are no notes for this item.