GroupsBreadcrumb.vue

<template>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item" v-for="group in groups" v-bind:class="{ active: group.active }">
        <a href="#" v-on:click="changeBreadcrumb(group.id)" v-if="!group.active">{{group.name}}</a>
        <span v-if="group.active">{{group.name}}</span>
      </li>
    </ol>
  </nav>
</template>

<script>
  function buildItems(values) {
    let groups = [];

    groups.push({
      name: 'Root',
      id: null,
      active: false
    });

    for(let i = 0; i < values.length; i++) {
      let group = values[i];
      group.active = false;
      groups.push(group);
    }

    // Activate the last item
    groups[groups.length - 1].active = true;

    return groups;
  }

  export default {
    name: 'GroupsBreadcrumb',
    props: {
      values: Array
    },
    data() {
      return {
        groups: buildItems(this.values)
      };
    },
    methods: {
      changeBreadcrumb: function(groupId) {
        console.log('changeBreadcrumb', groupId);
      }
    }
  }
</script>

<style scoped>
nav {
  margin-top: 10px;
}
</style>