pedi2/resources/js/components/NavMigas.vue

<template>
	<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
		<ul class="mt-4">
			<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
				<a :href="miga.href" v-text="miga.nombre" 
				   :class="{'has-text-danger': i != migaActiva}"></a>
			</li>
		</ul>
	</nav>
</template>

<script>
	export default {
		data() {
		    return {
		      migas: []
		    }
		  },
		  computed: {
		    visible: function() {
		      return this.migas.length > 0
		    },
			migaActiva: function() { 
				return this.migas.length-1 
			}
		  },
		  mounted() {
		    Event.$on('migas-setear-como-inicio', (miga) =>  {
		      this.migas = [];
		      this.migas.push(miga);
		    });
		    Event.$on('migas-agregar', (miga) =>  {
		      this.migas.push(miga);
		    });
		    Event.$on('migas-reset', () =>  {
		      this.migas = [];
		    });
		    Event.$on('migas-pop', () =>  {
		      this.migas.pop();
		    });
		  }
	}
</script>

<style>
nav.breadcrumb.is-fixed-top {
	position: fixed;
	left: 0;
	right: 0;
	top: 3.25rem;
	height: 2.75rem;
	z-index: 5;
}
</style>