Breadcrumb

A list of links that indicate the current page's location within a navigational hierarchy.

Usage

Pass an array to the links prop of the Breadcrumb component. Each link can have the following properties:

• label - The label of the link.
• labelClass - The class of the link label. :u-badge
• icon - The icon of the link.
• iconClass - The class of the link icon.

1. Home
2. Navigation
3. Breadcrumb

<script setup>
const links = [{
  label: 'Home',
  icon: 'icon-[heroicons--home]',
  to: '/'
}, {
  label: 'Navigation',
  icon: 'icon-[heroicons--square-3-stack-3d]'
}, {
  label: 'Breadcrumb',
  icon: 'icon-[heroicons--link]'
}]
</script>

<template>
  <SBreadcrumb :links="links" />
</template>