BaseBreadcrumb

import BaseBreadcrumb from "@wikicasa-dev/components/UIKit/BaseBreadcrumb";

Use it at the top of listing, place and detail pages to show where the page sits in the site hierarchy. Pass the trail as items, root first; each item is { link, label, active?, dataTooltip? }. The active item is shown in blue (normally the last one).

#Usage

<script setup lang="ts">
import BaseBreadcrumb from "@wikicasa-dev/components/UIKit/BaseBreadcrumb";

const items = [
  { link: "/", label: "Home" },
  { link: "/vendita-case/lombardia/", label: "Lombardia" },
  { link: "/vendita-case/milano/", label: "Milano" },
  { link: "/vendita-case/milano/navigli/", label: "Navigli", active: true },
];
</script>

<template>
  <BaseBreadcrumb :items="items" list-classes="breadcrumb-list" />
</template>

<style>
.breadcrumb-list { flex-wrap: wrap; font-size: 12px; }
</style>

#Do / Don't

• Every item needs a non-empty label: an item with an empty label is rendered as a separator instead.
• Long trails: pass a listClasses class with flex-wrap: wrap so it wraps on mobile instead of overflowing.
• Customize an item with the item slot (receives item, including its idx) and the arrow with the separator slot.
• dataTooltip is only written to the <li> as data-tooltip; it shows nothing by itself.

#Styling hooks

listClasses (the <ol>, a flex row with 10px gap) and listItemClasses (every <li>, separators included).

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
items	BreadcrumbItemsType[]		yes
listClasses	ClassTypeProp
listItemClasses	ClassTypeProp

Events

None.

v-model

None.

Slots

Name	Slot props
item	{ item: BreadcrumbItemsTypeWithIdx; }
separator

Exposed (template ref)

None.