Vue Component Library

Appearance

Breadcrumb Component Demo ​

This page demonstrates the Breadcrumb component with various configurations and examples.

Basic Breadcrumb ​

A simple breadcrumb with default settings.

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

<script setup>
import { ref } from "vue";

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

Custom Separator ​

Breadcrumb with a custom separator character.

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

<script setup>
import { ref } from "vue";

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

Custom Gap ​

Breadcrumb with custom spacing between items.

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

<script setup>
import { ref } from "vue";

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

Custom Separator Slot ​

Breadcrumb with a custom separator using slots.

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

<script setup>
import { ref } from "vue";

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

<style>
.custom-separator {
  color: #666;
  margin: 0 0.5rem;
}
</style>
Home→
Products→
Current Page

Long Path Example ​

Example of a breadcrumb with a longer navigation path.

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

<script setup>
import { ref } from "vue";

const breadcrumbItems = [
  { label: "Home", to: "/", disabled: false },
  { label: "Admin", to: "/admin", disabled: false },
  { label: "Users", to: "/admin/users", disabled: false },
  { label: "User Details", to: "/admin/users/details", disabled: false },
  { label: "Edit Profile", to: "/admin/users/details/edit", disabled: true },
];
</script>
Home/
Admin/
Users/
User Details/
Edit Profile