---
const url = Astro.url;
const pathSegments = url.pathname.split("/").filter((segment) => segment);
const breadcrumbItems = pathSegments.map((segment, index) => {
const href = "/" + pathSegments.slice(0, index + 1).join("/");
const text = decodeURIComponent(segment.replace(/-/g, " "));
return { href, text };
});
---
<div class="breadcrumb">
<ul>
{breadcrumbItems.map((item) => <li>{item.text}</li>)}
</ul>
</div>
<style>
@layer starlight.core {
.breadcrumb {
padding:0 2.4rem;
padding-top: 0px;
}
ul {
list-style: none;
display: flex;
/* gap: 0.5rem; */
flex-wrap: wrap;
font-size: 0.875rem;
color: var(--sl-color-text);
padding-left: 0px;
}
li {
position: relative;
text-transform: capitalize;
}
li::after {
content: '';
display: inline-block;
width: 8px;
height: 10px;
margin-left: 0.5rem;
margin-right: 0.5rem;
background-image: url('data:image/svg+xml;utf8,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.50004 1L6.5 6L1.5 11" stroke="%23999999" stroke-width="1.5" stroke-miterlimit="16" stroke-linecap="round" stroke-linejoin="round"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
li:last-child {
color: var(--sl-color-white);
}
li:last-child::after {
display: none;
}
}
</style>