<div class="collection-header">
    <div class="collection-hero m-0">
        <div class="collection-hero__image" style=""></div>
            <div class="collection-hero__title-wrapper container">
            <h1 class="collection-hero__title">Page Title</h1>
            <div class="breadcrumbs text-uppercase mt-1 mt-lg-2"><a href="index.html" title="Back to the home page">Home</a><span>|</span><span class="fw-bold">Page Title</span></div>
        </div>
    </div>
</div>

<div class="collection-header">
    <div class="collection-hero m-0">
        <div class="collection-hero__image" style="background-image:url('assets/images/collection-banner/clothing-banner.jpg');"></div>
            <div class="collection-hero__title-wrapper container">
            <h1 class="collection-hero__title">Page Title</h1>
            <div class="breadcrumbs text-uppercase mt-1 mt-lg-2"><a href="index.html" title="Back to the home page">Home</a><span>|</span><span class="fw-bold">Page Title</span></div>
        </div>
    </div>
</div>

<div class="bredcrumbWrap">
    <div class="breadcrumbs">
        <a href="index.html" title="Back to the home page">Home</a><span aria-hidden="true">|</span><span class="fw-bold">Page Title</span>
    </div>
</div>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb m-0">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Page Title</a></li>
        <li class="breadcrumb-item active" aria-current="page">Sub Page Title</li>
    </ol>
</nav>