Skip to content

useBreadcrumbs

Definition

Composable for breadcrumbs management. Read the guide.

It's recommended to use getCategoryBreadcrumbs for category breadcrumbs.

Basic usage

ts
const {  breadcrumbs, clearBreadcrumbs } = useBreadcrumbs(newBreadcrumbs);

Signature

ts
export function useBreadcrumbs(
  newBreadcrumbs?: Breadcrumb[],
): UseBreadcrumbsReturn 

Parameters

NameTypeDescription
newBreadcrumbs
Array<Breadcrumb>

Return type

See UseBreadcrumbsReturn
ts
export type UseBreadcrumbsReturn = {
  /**
   * Clear breadcrumbs store
   */
  clearBreadcrumbs(): void;
  /**
   * List of breadcrumbs
   */
  breadcrumbs: ComputedRef<Breadcrumb[]>;
};

Properties

NameTypeDescription
breadcrumbs
ComputedRef<Array<Breadcrumb>>
List of breadcrumbs

Methods

NameTypeDescription
clearBreadcrumbs
void
Clear breadcrumbs store

Usage

vue
<script setup lang="ts">
useBreadcrumbs([
  {
    name: "Home",
    path: "/",
  },
  {
    name: "Top sellers",
    path: "/top-sellers",
  },
]);
</script>
useBreadcrumbs has loaded