<b-breadcrumb :items="items1" />
<b-breadcrumb :items="items2" />
<b-breadcrumb :items="items3" />

<script>
export default {
  data() {
    return {
      items1: [
        {
          text: 'Home',
          active: true
        }
      ],
      items2: [
        {
          text: 'Home',
          href: '#'
        },
        {
          text: 'Library',
          active: true
        }
      ],
      items3: [
        {
          text: 'Home',
          href: '#'
        },
        {
          text: 'Library',
          href: '#'
        },
        {
          text: 'Data',
          active: true
        }
      ]
    }
  }
}

                    
<b-breadcrumb :items="itemsIcon1" />
<b-breadcrumb :items="itemsIcon2" />
<b-breadcrumb :items="itemsIcon3" />

<script>
export default {
  data() {
    return {
      itemsIcon1: [
        {
          html: '<i class="ri-home-4-line mr-1 float-left"></i>Home',
          active: true
        }
      ],
      itemsIcon2: [
        {
          html: '<i class="ri-home-4-line mr-1 float-left"></i>Home',
          href: '#'
        },
        {
          text: 'Library',
          active: true
        }
      ],
      itemsIcon3: [
        {
          html: '<i class="ri-home-4-line mr-1 float-left"></i>Home',
          href: '#'
        },
        {
          text: 'Library',
          href: '#'
        },
        {
          text: 'Data',
          active: true
        }
      ]
    }
  }
}

                    
<nav aria-label="breadcrumb ">
  <ol class="breadcrumb bg-primary">
    <li class="breadcrumb-item active text-white" aria-current="page">Home</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary">
    <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Library</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary mb-0">
    <li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
  </ol>
</nav>

                    
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary">
    <li class="breadcrumb-item active text-white" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary">
    <li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Library</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary mb-0">
    <li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
    <li class="breadcrumb-item active text-white" aria-current="page">Data</li>
  </ol>
</nav>

                    
<b-breadcrumb class="iq-bg-primary" :items="itemsIcon1" />
<b-breadcrumb class="iq-bg-primary" :items="itemsIcon2" />
<b-breadcrumb class="iq-bg-primary" :items="itemsIcon3" />

<script>
export default {
  data() {
    return {
      itemsIcon1: [
        {
          html: '<i class="ri-home-4-line mr-1 float-left"></i>Home',
          active: true
        }
      ],
      itemsIcon2: [
        {
          html: '<i class="ri-home-4-line mr-1 float-left"></i>Home',
          href: '#'
        },
        {
          text: 'Library',
          active: true
        }
      ],
      itemsIcon3: [
        {
          html: '<i class="ri-home-4-line mr-1 float-left"></i>Home',
          href: '#'
        },
        {
          text: 'Library',
          href: '#'
        },
        {
          text: 'Data',
          active: true
        }
      ]
    }
  }
}

                    
<nav aria-label="breadcrumb">
    <ol class="breadcrumb iq-bg-danger">
      <li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
    </ol>
  </nav>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb iq-bg-danger">
      <li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb iq-bg-danger mb-0">
      <li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
      <li class="breadcrumb-item"><a href="#" class="text-danger">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
  </nav>