# Breadcrumbs

Component which renders a breadcrumb with router links for indicating the level of navigation the user is currently in.

# Most common usage scenario

<template>
  <SfBreadcrumbs :breadcrumbs="breadcrumbs" />
</template>
<script>
import { SfBreadcrumbs } from "@storefront-ui/vue";
export default {
  components: {
    SfBreadcrumbs,
  },
  data() {
    return {
      breadcrumbs: [
        { text: "Home", link: "#" },
        { text: "Category", link: "#" },
        { text: "Pants", link: "#" },
      ],
    };
  },
};
</script>

# Props

  • breadcrumbs
    • List of breadcrumbs (array of nested objects: [ { text, route } ])
    • type: array
    • defaultValue: () => []

# Slots

  • link

    • Custom markup for previous pages (binds breadcrumb object)
    • bindings: breadcrumb
  • current

    • Custom markup for current page (binds breadcrumb object)
    • bindings: breadcrumb

# Events

None.

# CSS modifiers

  • .sf-breadcrumbs__breadcrumb--current

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --link-color
  • --link-text-decoration

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.