Navigation links

Code

<!-- Example navigation links: -->
<div class="navLinks-container">
    <ul class="cui breadcrumb category-breadcrumb">
        <li><a href="#"><span class="cicon-animal-service" aria-hidden="true"></span>Lorem ipsum arlisn</a></li>
        <li><a href="#">Share <span class="cicon-share-alt" aria-hidden="true"></span></a></li>
        <li><a href="#">Lorem ipsum adrt</a></li>
    </ul>
    <span aria-hidden="true" class="bg-overlay"></span>
</div>

<br><br>

<!-- Example navigation links with an active link: -->
<div class="navLinks-container">
    <ul class="cui breadcrumb category-breadcrumb">
        <li class="active"><a href="#"><span class="cicon-animal-service" aria-hidden="true"></span>Lorem ipsum arlisn</a></li>
        <li><a href="#">Share <span class="cicon-share-alt" aria-hidden="true"></span></a></li>
        <li><a href="#">Lorem ipsum adrt</a></li>
    </ul>
    <span aria-hidden="true" class="bg-overlay"></span>
</div>

<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

Multiple navigation links with or without icons

Example of usage: Category page navigation links