src/components/ui/Breadcrumb.astro
---
// Breadcrumb, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered"> <div style="display:flex;flex-direction:column;gap:1.25rem"> <nav aria-label="Paginapad" class="bc bc--md" data-component="breadcrumb"> <ol class="bc__list"> <li class="bc__item"> <a href="#" class="bc__link"> Home </a> </li><li class="bc__item"> <span class="bc__sep" aria-hidden="true"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <a href="#" class="bc__link"> Diensten </a> </li><li class="bc__item"> <span class="bc__sep" aria-hidden="true"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <span class="bc__current" aria-current="page"> Google Ads </span> </li> </ol> </nav> <nav aria-label="Paginapad" class="bc bc--md" data-component="breadcrumb"> <ol class="bc__list"> <li class="bc__item"> <a href="#" class="bc__link"> Home </a> </li><li class="bc__item"> <span class="bc__sep" aria-hidden="true"> / </span> <a href="#" class="bc__link"> Cases </a> </li><li class="bc__item"> <span class="bc__sep" aria-hidden="true"> / </span> <span class="bc__current" aria-current="page"> BLURR x TechCorp </span> </li> </ol> </nav> <nav aria-label="Paginapad" class="bc bc--md" data-component="breadcrumb"> <ol class="bc__list"> <li class="bc__item"> <a href="#" class="bc__link"> Home </a> </li><li class="bc__item"> <span class="bc__sep" aria-hidden="true"> · </span> <a href="#" class="bc__link"> Blog </a> </li><li class="bc__item"> <span class="bc__sep" aria-hidden="true"> · </span> <span class="bc__current" aria-current="page"> SEO tips 2025 </span> </li> </ol> </nav> </div> </div>
<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>