Breadcrumbs

<nav aria-label="breadcrumb" class="breadcrumb">
  <ol>
    {{ range .Ancestors.Reverse }}
      <li>
        <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
      </li>
    {{ end }}
    <li class="active">
      <a aria-current="page" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
    </li>
  </ol>
</nav>

.breadcrumb ol {
  padding-left: 0;
}

.breadcrumb li {
  display: inline;
}

.breadcrumb li:not(:last-child)::after {
  content: "»";
}

Home » products » electrical » bulbs

---
const baseUrl = import.meta.env.BASE_URL;
const pathname = Astro.url.pathname.replace(baseUrl, "");
const segments = pathname.match(/[^\/]+/g) ?? [];
---

<div class="msh-breadcrumbs">
    <span id="goBack">&larr;&hairsp;Back</span>
    <span>:</span>
    <a href={baseUrl}>Home</a>
    {segments.map((segment, index) => {
        const path = segments.slice(0, index + 1).join("/");
        const isLast = index === segments.length - 1;
        return(
            <span>
                {"/"}
                {isLast ? (
                    <span>{segment}</span>
                ) : (
                <a href={`${baseUrl}${path}`}>{segment}</a>
                )}
            </span>
        );
    })}
</div>

<style>
    .msh-breadcrumbs {
        margin-bottom: 1rem;
        overflow: auto;
        white-space: nowrap;
        font-size: 1rem;
        scrollbar-width: none;
        padding: 9px 0;
    }
    #goBack {
        cursor: pointer;
        color: blue;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const back = document.getElementById('goBack');
        const prev = document.referrer;
        if (!back) return;
        back.addEventListener('click', () => {
            if (prev.startsWith("https://reports.mgmavlca.org") || prev.startsWith("http://localhost:4321")) {
                window.history.back();
            } else {
                window.location.href = "/";
            }
        });
    });
</script>