Breadcrumb

The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.

Examples

Breadcrumb can have a various separator icon.

Code

<script setup lang="ts">
import { BaseBreadcrumb } from '@point-hub/papp'

const items = [
  {
    name: 'Template',
    path: '/template'
  },
  {
    name: 'Component',
    path: '/template/component'
  },
  {
    name: 'Breadcrumb'
  }
]
</script>

<template>
  <div>
    <component :is="BaseBreadcrumb" :items="items" separator="angle" v-slot="{ item }">
      <router-link v-if="item.path" :class="{ 'breadcrumb-link': item.path }" :to="item.path">
        {{ item.name }}
      </router-link>
      <span v-else>{{ item.name }}</span>
    </component>
    <component :is="BaseBreadcrumb" :items="items" separator="arrow" v-slot="{ item }">
      <router-link v-if="item.path" :class="{ 'breadcrumb-link': item.path }" :to="item.path">
        {{ item.name }}
      </router-link>
      <span v-else>{{ item.name }}</span>
    </component>
    <component :is="BaseBreadcrumb" :items="items" separator="slash" v-slot="{ item }">
      <router-link v-if="item.path" :class="{ 'breadcrumb-link': item.path }" :to="item.path">
        {{ item.name }}
      </router-link>
      <span v-else>{{ item.name }}</span>
    </component>
  </div>
</template>

Breadcrumb API

Types

export interface ItemInterface {
  name: string
  path?: string
}
export type SeparatoryType = 'angle' | 'arrow' | 'slash'

Props

Name	Type	Default	Description
items	ItemInterface[]		Breadcrumb items is required.
separator	SeparatorType	angle	Breadcrumb Separator.

Slot

#default slot for rendering breadcrumb content