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