<svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.crumb{font-family:'DM Sans',sans-serif;font-size:14px;fill:#64748b}
.crumbcur{font-family:'DM Sans',sans-serif;font-size:14px;fill:#0b0b0c;font-weight:600}
.sep{font-family:'DM Sans',sans-serif;font-size:14px;fill:#cbd5e1}
.menu{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;fill:#0b0b0c}
.note{font-family:'DM Sans',sans-serif;font-size:13px;fill:#475569}
</style>
</defs>
<rect width="900" height="300" fill="#F8F6F2"/>
<rect x="40" y="40" width="820" height="60" rx="8" fill="#fff" stroke="#e2e8f0"/>
<text x="64" y="76" class="crumb">Home</text>
<text x="112" y="76" class="sep">&gt;</text>
<text x="128" y="76" class="crumb">Category</text>
<text x="210" y="76" class="sep">&gt;</text>
<text x="226" y="76" class="crumbcur">Current Page Title</text>
<rect x="40" y="130" width="180" height="44" rx="6" fill="#020617"/>
<text x="130" y="157" text-anchor="middle" class="menu" style="fill:#fff">SERVICES ▾</text>
<rect x="240" y="130" width="180" height="44" rx="6" fill="#fff" stroke="#cbd5e1"/>
<text x="330" y="157" text-anchor="middle" class="menu">PORTFOLIO</text>
<rect x="440" y="130" width="140" height="44" rx="6" fill="#fff" stroke="#cbd5e1"/>
<text x="510" y="157" text-anchor="middle" class="menu">ABOUT</text>
<rect x="600" y="130" width="140" height="44" rx="6" fill="#fff" stroke="#cbd5e1"/>
<text x="670" y="157" text-anchor="middle" class="menu">BLOG</text>
<text x="450" y="230" text-anchor="middle" class="note" font-weight="600" fill="#0b0b0c">Breadcrumbs show visitors — and search engines — exactly where a page sits</text>
<text x="450" y="252" text-anchor="middle" class="note">A flat top-level menu keeps every major section one click from anywhere on the site</text>
</svg>
