JavaScript is used to provide responsive functionality on smaller screens. The breadcrumb trail is designed to fit onto one line, no matter the length. If the breadcrumb trail becomes wider than the screen, the trail will get scrolled to the right so the current page is always in view. A subtle faded overlay will appear on the left edge to indicate that the area can be scrolled to the left.
Demo
Code
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/coc.breadcrumb.js"></script>
<nav class="breadcrumb-container" role="navigation" aria-label="You are here:">
<ol class="cui breadcrumb">
<li><a href="{{ URL }}">{{ Page title 1 }}</a></li>
<li><a href="{{ URL }}">{{ Page title 2 }}</a></li>
<li><a href="{{ URL }}">{{ Page title 3 }}</a></li>
<li class="active"><a href="{{ URL }}">{{ Current page title }}</a></li>
</ol>
<span class="bg-overlay" aria-hidden="true"></span>
</nav>
Navigation links
Navigation links do not need to follow a heirarchy like the breadcrumbs. This pattern is ideal for displaying a small set of links. Icons may be used to the right or left of the links to provide visual cues to indicate the purpose of the link.
The HTML for the navigation links is similar to the HTML used for the breadcrumbs, with some minor differences. In addition, JavaScript is not required for the responsive interaction of this pattern.
<div class="navlinks-container">
<ul class="cui breadcrumb">
<li class="active"><a href="{{ URL }}">{{ Example active link }}</a></li>
<li><a href="{{ URL }}">{{ Link 2 }}</a></li>
<li><a href="{{ URL }}">{{ Link 3 }}</a></li>
</ul>
<span class="bg-overlay" aria-hidden="true"></span>
</div>
Usage
Breadcrumb general guidelines
A breadcrumb trail visualizes how site content has been structured, how to navigate back to previous web pages, and may identify the current location.
The links in the breadcrumb trail should be composed of the organizational heirarchy of the site that leads to the page or the list of pages the user took to get the page.
The breadcrumb trail is designed to fit onto one line, no matter the length. If the breadcrumb trail becomes wider than the screen, the trail will get scrolled to the right so the current page is always in view. A subtle faded overlay will appear on the left edge to indicate that the area can be scrolled to the left.
