<template>
  <CRow>
    <CCol col>
      <CCard>
        <CCardHeader>
          <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
          <div class="card-header-actions">
            <a 
              href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 
              class="card-header-action" 
              rel="noreferrer noopener" 
              target="_blank"
            >
              <small class="text-muted">docs</small>
            </a>
          </div>
        </CCardHeader>
        <CCardBody>
          <CBreadcrumb :items="items"/>
          <CBreadcrumb :items="items2"/>
          <CBreadcrumb :items="items3"/>
        </CCardBody>
      </CCard>
    </CCol>
  </CRow>
</template>

<script>
export default {
  name: 'Breadcrumbs',
  data () {
    return {
      items: [
        {
          textHtml: '<b>Admin</b>',
          href: '#'
        }, 
        {
          textHtml: 'Manage',
          href: '#'
        }, 
        {
          textHtml: 'Library'
        }
      ],


      items2: [
        {
          textHtml: 'Go to dashboard',
          to: '/dashboard'
        }, 
        {
          textHtml: 'Go to widgets',
          to: '/Widgets'
        }, 
        {
          textHtml: 'Go to Google',
          href: 'http://google.com'
        },
        {
          textHtml: 'Current page'
        }
      ],


      items3: [
        {
          textHtml: 'Added',
          to: '#2',
          addClasses: 'font-xl'
        }, 
        {
          textHtml: 'Custom',
          to: '#3',
          addClasses: 'font-xl'
        },
        {
          textHtml: 'Classes',
          to: '#4',
          addClasses: 'font-xl text-danger'
        }
      ]
    }
  }
}
</script>

<style>
  .breadcrumb-item + .font-xl.breadcrumb-item::before {
    color: rgb(140, 195, 38);
    content: '>>';
    padding: 0px 10px;

  }
</style>
