breadcrubms.vue

<template>
  <div class="lazy_breadcrumbs">
    <ul class="breadcrumbs breadcrumbs_type">
      <li
        v-for="(item, index) in diskLoaded"
        :item="item"
        :key="item.id"
        :class="`breadcrumbs__item ${index === diskLoaded.length-1 ? 'breadcrumbs__item_active' : ''}`"
      >
        <span class="breadcrumbs__element" v-if="index === diskLoaded.length-1">{{ item.text }}</span>
        <a
          v-else
          @click.stop="doThis(item.path)"
          class="breadcrumbs__element breadcrumbs_go"
        >{{ item.text }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'lazy-breadcrumb',
  data: () => {
    return {}
  },
  computed: {
    diskLoaded: function () {
      return this.$store.state.diskLoaded
    }
  },
  methods: {
    doThis: function (path) {
      if (path) {
        this.$router.push({
          path: `/drive/u/0/folder/${path}`
        })
      } else {
        this.$router.push({
          path: `/drive/u/0/my-drive`
        })
      }
    }
  }
}
</script>

style.scss

.breadcrumbs {
  --cssuiBreadcrumbsTextColor: var(--breadcrumbsTextColor);
  --cssuiBreadcrumbsTextColorActive: var(--breadcrumbsTextColorActive);
  --cssuiBreadcrumbsDivider: var(--breadcrumbsDivider);
  --cssuiBreadcrumbsDividerColor: var(--breadcrumbsDividerColor, inherit);
  --cssuiBreadcrumbsDividerSize: var(--breadcrumbsDividerSize, 16px);
  --cssuiBreadcrumbsIndent: var(--breadcrumbsIndent, 8px);

  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;

  display: flex;
  flex-wrap: wrap;
}

.breadcrumbs__item {
  display: inline-block;
  position: relative;

  padding-right: calc(var(--cssuiBreadcrumbsDividerSize) + var(--cssuiBreadcrumbsIndent));
  margin-right: var(--cssuiBreadcrumbsIndent);

  color: var(--cssuiBreadcrumbsTextColor);
}

.breadcrumbs__item:after {
  content: var(--cssuiBreadcrumbsDivider);
  width: var(--cssuiBreadcrumbsDividerSize);
  height: var(--cssuiBreadcrumbsDividerSize);

  line-height: 1;
  text-align: center;

  font-family: "Arial", sans-serif;
  font-size: var(--cssuiBreadcrumbsDividerSize);
  color: var(--cssuiBreadcrumbsDividerColor);

  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.breadcrumbs__item_active {
  margin-right: 0;
  padding-right: 0;
  color: var(--cssuiBreadcrumbsTextColorActive);
}

.breadcrumbs__item_active:after {
  display: none;
}

.breadcrumbs__element {
  color: inherit;
}

.breadcrumbs_go {
  cursor: pointer;
}

.breadcrumbs {
  --breadcrumbsTextColor: #d1c4e9;
  --breadcrumbsTextColorActive: #fff;
}

.breadcrumbs_type {
  --breadcrumbsDivider: "›";
  --breadcrumbsDividerSize: 20px;
}

.breadcrumbs__item a {
  text-decoration: none;
  color: #d1c4e9;
}