A trail of links to let users find their place within a website.
No rocket science here. Although rockets are cool, to be honest. 🚀 You can install the component using NPM or Yarn.
npm install @tournant/breadcrumb --save
If you use Yarn:
yarn add @tournant/breadcrumb
Once the component is installed you need to import it wherever you want to use it.
Don’t forget to add it to the registered components (been there, done that):
components:TournantBreadcrumb// ... all the other amazing components
The breadcrumb renders an ordered list of links. The last item in the list is marked with
links: Array. Required. The links in the path you want to render. Consisting of items which are structured as follow:
item: Object. Needs to have the properties
text. If used with Nuxt or @vue/router
exactcan also be set.
labelText: String. Default: «Breadcrumb». A breadcrumb navigation has to have an
aria-label, you can change it with this prop.
labelledBy: You can provide the ID of an element on the page to label the navigation. If you use
aria-labelwill not be added.
<!-- Input --><!-- Output -->HomepageArchivePost
You can omit
to for the last item. In which case
aria-current will not be set.
A label can be either provided by passing a
labelText or linking an element via ID using
labelledBy. The linked element can be included in the component by using the
By default, all links are rendered as simple
a tags. However, if you use Nuxt or @vue/router this is automatically detected and the links are rendered as
Under the hood it makes use of @tournant/dynamic-anchor.
Schema.org compatible BreadcrumbList microdata is embedded into the markup. Hence this breadcrumb is discoverable by third parties and they are able to use this data, e.g. in displaying it in a search results page.
If a user clicks on a link in the breadcrumb it emits a custom event named
itemClick. The payload is the
index of the clicked item.
Bugs & Enhancements
If you found a bug, please create a bug ticket.
For enhancements please refer to the contributing guidelines.