Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Preview
HTML code
Home
Blog
The Future of SaaS: Emerging Trends to Watch
                
<div class="d-flex align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path class="stroke-dark" d="M6.75 19.2502H17.25C18.3546 19.2502 19.25 18.3548 19.25 17.2502V9.75025L12 4.75024L4.75 9.75025V17.2502C4.75 18.3548 5.64544 19.2502 6.75 19.2502Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path class="stroke-dark" d="M9.75 15.7493C9.75 14.6447 10.6455 13.7493 11.75 13.7493H12.25C13.3546 13.7493 14.25 14.6447 14.25 15.7493V19.2493H9.75V15.7493Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <p class="text-900 mx-2 mb-0">Home</p>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path class="stroke-dark" d="M10.75 8.75L14.25 12L10.75 15.25" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <p class="text-500 ms-2 mb-0">Contact Us</p>
</div>
<div class="d-flex align-items-center mt-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path class="stroke-dark" d="M6.75 19.2502H17.25C18.3546 19.2502 19.25 18.3548 19.25 17.2502V9.75025L12 4.75024L4.75 9.75025V17.2502C4.75 18.3548 5.64544 19.2502 6.75 19.2502Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path class="stroke-dark" d="M9.75 15.7493C9.75 14.6447 10.6455 13.7493 11.75 13.7493H12.25C13.3546 13.7493 14.25 14.6447 14.25 15.7493V19.2493H9.75V15.7493Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <p class="text-900 mx-2 mb-0">Home</p>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path class="stroke-dark" d="M10.75 8.75L14.25 12L10.75 15.25" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <p class="text-900 mx-2 mb-0">Blog</p>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path class="stroke-dark" d="M10.75 8.75L14.25 12L10.75 15.25" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <p class="text-500 ms-2 mb-0">The Future of SaaS: Emerging Trends to Watch</p>
</div>