1 <template>
 2 <nav role="navigation">
 3     <polaris-unstyled-link 
 4         v-if="breadcrumbAction"
 5         :url="breadcrumbAction.url"
 6         class="Polaris-Breadcrumbs__Breadcrumb">
 7         <span  class="Polaris-Breadcrumbs__Icon">
 8             <polaris-icon :source="chevronIcon"></polaris-icon>
 9         </span>
10         {{ breadcrumbAction.content }}
11     </polaris-unstyled-link>
12 </nav>
13 </template>
14 
15 <script>
16 import PolarisUnstyledLink from './PolarisUnstyledLink.vue';
17 import PolarisIcon from './PolarisIcon.vue';
18 import chevronIcon from '../resources/chevron-icon.svg';
19 
20 export default {
21     props: {
22         /**
23          * This takes an array of actions, but only shows the last one in the array
24          * for some reason.
25          */
26         breadcrumbs: {
27             type: Array,
28             default() {
29                 return [];
30             }
31         },
32     },
33     data() {
34         return {
35             chevronIcon: chevronIcon
36         };
37     },
38     computed: {
39         breadcrumbAction() {
40             if (this.breadcrumbs.length < 1) {
41                 return null;
42             }
43             return this.breadcrumbs[this.breadcrumbs.length - 1];
44         }
45     }
46 };
47 </script>