Breadcrumb API Reference

Props

Prop	Type	Default	Description
items	Array	[]	Array of breadcrumb items to display
separator	String	"/"	Character or string to use as separator
gap	String	"0.5rem"	Gap between breadcrumb items

Breadcrumb Item Object Structure

Each item in the items array should have this structure:

{
  label: "Home",           // Required: Display text for the breadcrumb item
  to: "/test-page",        // Required: Route path to navigate to when clicked
  disabled: false          // Optional: Whether the item is clickable (default: false)
}

Example:

const breadcrumbItems = [
  { label: "Home", to: "/test-page", disabled: false },
  { label: "Products", to: "/products", disabled: false },
  { label: "Current Page", to: "/products/item", disabled: true },
];

Events

The component doesn't emit any events directly. Navigation is handled internally using Vue Router.

Slots

Slot	Description
separator	Custom content for the separator between items

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OBreadCrumb :items="breadcrumbItems" />
</template>

<script setup>
import { OBreadCrumb } from "your-component-library";

const breadcrumbItems = [
  { label: "Home", to: "/" },
  { label: "Products", to: "/products" },
  { label: "Category", to: "/products/category" },
  { label: "Current Page", to: "/products/category/item", disabled: true },
];
</script>

Custom Separator

<template>
  <OBreadCrumb :items="breadcrumbItems" separator="›" />
</template>

<script setup>
import { OBreadCrumb } from "your-component-library";

const breadcrumbItems = [
  { label: "Home", to: "/" },
  { label: "Products", to: "/products" },
  { label: "Current Page", to: "/products/item", disabled: true },
];
</script>

Custom Gap

<template>
  <OBreadCrumb :items="breadcrumbItems" gap="1rem" />
</template>

<script setup>
import { OBreadCrumb } from "your-component-library";

const breadcrumbItems = [
  { label: "Home", to: "/" },
  { label: "Products", to: "/products" },
  { label: "Current Page", to: "/products/item", disabled: true },
];
</script>

Custom Separator Slot

<template>
  <OBreadCrumb :items="breadcrumbItems">
    <template #separator>
      <span class="custom-separator">→</span>
    </template>
  </OBreadCrumb>
</template>

<script setup>
import { OBreadCrumb } from "your-component-library";

const breadcrumbItems = [
  { label: "Home", to: "/" },
  { label: "Products", to: "/products" },
  { label: "Current Page", to: "/products/item", disabled: true },
];
</script>

<style>
.custom-separator {
  color: #666;
  margin: 0 0.5rem;
}
</style>