Breadcrumb

Stable

A list of links that indicate the current page's location within a navigational hierarchy.

<script setup lang="ts">
import { type BreadcrumbItemProp, HBreadcrumb } from '@holistics/design-system'

const items: BreadcrumbItemProp[] = [
  {
    icon: 'data-model',
    label: 'Very Long breadcrumb',
    id: 'long',
  },
  {
    icon: 'data-model',
    label: 'item0',
    id: 'item0',
  },
  {
    icon: 'data-model',
    label: 'item1',
    id: 'item1',
  },
  {
    icon: 'data-model',
    label: 'item2',
    id: 'item2',
  },
]
</script>

<template>
  <HBreadcrumb
    :items
    :show-root="false"
  />
</template>

Examples

Auto Collapsed

<script setup lang="ts">
import { type BreadcrumbItemProp, HBreadcrumb } from '@holistics/design-system'

const items: BreadcrumbItemProp[] = [
  {
    icon: 'data-model',
    label: 'Very Long breadcrumb',
    id: 'long',
  },
  {
    icon: 'data-model',
    label: 'item0',
    id: 'item0',
  },
  {
    icon: 'data-model',
    label: 'item1',
    id: 'item1',
  },
  {
    icon: 'data-model',
    label: 'item2',
    id: 'item2',
  },
]
</script>

<template>
  <div class="w-1/2 border p-2">
    <HBreadcrumb
      :items
      :show-root="false"
    />
  </div>
</template>

Show Root

<script setup lang="ts">
import { type BreadcrumbItemProp, HBreadcrumb } from '@holistics/design-system'

const items: BreadcrumbItemProp[] = [
  {
    icon: 'data-model',
    label: 'Very Long breadcrumb',
    id: 'long',
  },
  {
    icon: 'data-model',
    label: 'item0',
    id: 'item0',
  },
  {
    icon: 'data-model',
    label: 'item1',
    id: 'item1',
  },
  {
    icon: 'data-model',
    label: 'item2',
    id: 'item2',
  },
]
</script>

<template>
  <div class="w-1/2 border p-2">
    <HBreadcrumb
      :items
      show-root
    />
  </div>
</template>

Custom Item

<script setup lang="ts">
import { type BreadcrumbItemProp, HBreadcrumb } from '@holistics/design-system'

const items: BreadcrumbItemProp[] = [
  {
    icon: 'data-model',
    label: 'Very Long breadcrumb',
    id: 'long',
  },
  {
    icon: 'data-model',
    label: 'item0',
    id: 'item0',
  },
  {
    icon: 'data-model',
    label: 'item1',
    id: 'item1',
  },
  {
    icon: 'data-model',
    label: 'item2',
    id: 'item2',
  },
]
</script>

<template>
  <HBreadcrumb
    :items
    :show-root="false"
  >
    <template #item0="{item}">
      <span class="text-red-500">{{ item.label }}</span>
    </template>
    <template #item1="{item}">
      <span class="text-blue-500">{{ item.label }}</span>
    </template>
    <template #item2="{item}">
      <span class="text-green-500">{{ item.label }}</span>
    </template>
  </HBreadcrumb>
</template>

API

Pass-through: <ol>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
showRoot *	boolean
items	Omit<BreadcrumbItemProp, "active">[] = []