Breadcrumb

Introduction to using the Breadcrumb component

Breadcrumb, commonly called "breadcrumbs", is like the breadcrumbs scattered in the "Hansel and Gretel" story to avoid getting lost. On webpages, users sometimes suddenly forget which level of the site they're on; at that time the breadcrumb plays its role, pointing the way so the user knows their location.

Basic usage

<bpa-breadcrumb :key="$route.path">
  <bpa-breadcrumb-item
    v-for="(pathItem, pathIndex) in path"
    :key="`pathIndex-${pathIndex}`"
    :title="`goto${pathItem.title}`"
    :to="pathItem.url"
  >
    {{ pathItem.title }}
  </bpa-breadcrumb-item>
</bpa-breadcrumb>

Attributes

Name	Value	Type	Default	Required	Note
to	{ url path }	Vue Route
title		String			<a title="title">

Demo