Breadcrumbs

Code

<nav role="navigation" aria-label="You are here:" class="breadcrumb-container">
    <ol class="cui breadcrumb breadcrumb-scroll">
        <li><a href="#">Home</a></li>
        <li><a href="#">Lorem Ipsum 2</a></li>
        <li><a href="#">Lorem Ipsum 3</a></li>
        <li><a href="#" class="active">Current page</a></li>
    </ol>
    <span aria-hidden="true" class="bg-overlay"></span>
</nav>

<script>
    // Example breadcrumb script for mobile optimization
    // Handles toggling the overlay and scrolling to the right-most element,
    // if the breadcrumbs width is larger than the screen size
    $(document).ready(function () {
        var width = $(window).width();
        var height = $(window).height();
        var breadcrumb = $(".cui.breadcrumb.breadcrumb-scroll");

        if( breadcrumb.length > 0) {
            breadcrumb.scrollLeft(breadcrumb[0].scrollWidth);
            breadcrumb.scroll(function () {
                var overlay = $(".breadcrumb-container .bg-overlay");
                if (this.scrollLeft === 0) {
                    overlay.hide();
                }
                else {
                    overlay.show();
                }
            });
            breadcrumb.scroll();

            $(window).on('resize', function () {
                if ($(window).width() !== width || $(window).height() !== height) {
                    breadcrumb.scrollLeft(breadcrumb[0].scrollWidth);
                    width = $(window).width();
                    height = $(window).height();
                }
            });
        }
    });
</script>

Usage

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. A breadcrumb trail either displays locations in the path the user took to reach the Web page, or it displays the location of the current Web page within the organization of the site.

Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current Web page. They are placed in the same location within each Web page in the set.

Accessibility

A breadcrumb navigation is usually positioned near the top of the page. As a navigational region, the <nav> element can be used, with a role attribute of navigation and a label “You are here:”.