Breadcrumbs
Breadcrumbs provide users with a clear path of navigation within a website or application. They typically appear as a trail of clickable links at the top of a page, showing the hierarchical structure of the content and allowing users to easily backtrack to previous pages.
In this implementation, the breadcrumbs are stored in the browser's local storage, allowing users to revisit previously visited pages and retrace their steps. The breadcrumbs are displayed in reverse chronological order, showing the last five pages visited by the user.
Illustration of Breadcrumbs Implementation
HTML Code
<nav class="c-top-nav__breadcrumbs l-my-2 u-ff-sans-serif">
<ul id="breadcrumb-list" class="c-top-nav__breadcrumbs-list">
<li class="c-top-nav__breadcrumb-item l-mr-1">
<a class="c-top-nav__breadcrumb-link u-navlinks" href="breadcrumbs.html">Breadcrumbs</a>
</li>
</ul>
</nav>