Add breadcrumbs to a UL Page

breadcrumbs.html

<!--
Docs: https://libguides.gvsu.edu/reusabledesigns/breadcrumbs
-->

<!-- Breadcrumb structure for static sites -->

<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ol>
    <li><a href="https://www.gvsu.edu/library">University Libraries</a></li>
    <li><a href="https://www.gvsu.edu/library/teaching-scholarship-120.htm">Teaching &amp; Scholarship</a></li>
    <li><a href="https://www.gvsu.edu/library/copyright-resources-157.htm">Copyright Resources</a></li>
    <li><span aria-current="page">Copyright Basics</span></li>
  </ol>
</nav>
    

<!-- Add Breadcrumbs to 3rd-party sites with JavaScript - style may be omitted if already loading UL Design System CSS -->

<script>
(function() {
var parent = document.createElement("nav");
parent.className = "breadcrumbs";
parent.setAttribute("aria-label", "breadcrumbs");
parent.innerHTML = '<ol><li><a href="https://www.gvsu.edu/library">University Libraries</a></li><li><a href="https://www.gvsu.edu/library/teaching-scholarship-120.htm">Teaching &amp; Scholarship</a></li><li><a href="https://www.gvsu.edu/library/copyright-resources-157.htm">Copyright Resources</a></li><li><span aria-current="page">Copyright Basics</span></li></ol><style>nav.breadcrumbs ol { list-style-type: none; margin: 0; padding: 0; } nav.breadcrumbs ol li { display: inline-block;} nav.breadcrumbs ol li a, nav.breadcrumbs ol li span { display: inline-block; margin: 0 .1em; padding-right: .1em; } nav.breadcrumbs ol li:after { content: "\u003E"; } nav.breadcrumbs ol li:first-child { margin-left: 0; } nav.breadcrumbs ol li:last-child:after { content: ""; }</style>';
var cmsContent = document.querySelector('#cms-content > .content');
cmsContent.insertBefore(parent, cmsContent.children[0]);
})();
</script>