<template> 

    <!--<div class="toolbar" style="background-color:transparent">-->
    <div class="toolbar" style="background-color:transparent">
      <ul class="breadcrumb wrapper3">
        <div v-for="(column,index) in columns">
          <li>
            <div v-if="column.title !== '' || column.img !== ''">
              <a :class="column.active" style="background-color:transparent;">
                <router-link tag="button" :to="column.link" exact>
                  <i :class="column.active">{{ column.img }}</i>
                  {{ column.title }}
                </router-link>
              </a>
            </div>
          </li>
          <li v-if="index + 1 < columns.length">
            <s-icon name="arrow forward" />
          </li>
        </div>
      </ul>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
    }
  }
}
</script>
<style type="text/css" scoped>
li a button {
  font-size: 1.25em !important;
}
a:after {
  background-color:transparent !important;
  border-left-color:transparent !important;
}
a {
  color: #fff !important;
  display: block;
  background: transparent !important;
  text-decoration: none;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  padding-left: 15px;
  border-radius: 2px 0 0 2px;
}
td {
  width:80px;
  height: 80px;
  border-width:5px;
  border-style:inset;
}
/*li {
  display: inline;
  width: 50px;
  float: left;
}*/
.linkcrumb {
  display: inline-flex;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  border-radius: 0.25rem;
}

.linkcrumb::after {
  display: block;
  content: "";
  clear: both;
}

.linkcrumb-item {
  float: left;
}

.linkcrumb-item + .linkcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #636c72;
  content: "/";
}

.linkcrumb-item + .linkcrumb-item:hover::before {
  text-decoration: underline;
}

.linkcrumb-item + .linkcrumb-item:hover::before {
  text-decoration: none;
}

.linkcrumb-item.active {
  color: #636c72;
}

.wrapper3 {
  position: relative;
  height:38px; 
  line-height:38px;
}
</style>
<style>
/*.breadcrumb {
  background-color: transparent;
}
.active {
  color: red;
}*/
</style>
