Breadcrumbs

KBreadcrumbs component is a navigational aid that displays the user's location within a website's hierarchy, offering a trail of links back to the parent or higher-level pages. Breadcrumbs help users understand their current position in the site and navigate more efficiently.

• Home /
• Components /
• Non-link item
  /
• Breadcrumb /

Props

items

An array of breadcrumb items.

• Home /
• Components /
• Non-link item
  /
• Breadcrumb /

interface BreadcrumbItem {
  to?: object | string
  text?: string // breadcrumb text that will appear inside of anchor tag
  title?: string // will be used for html title attribute on the anchor tag, helpful when text is truncated
  key?: string // identifier, must be unique for each breadcrumb item
  maxWidth?: number | string
}

<template>
  <KBreadcrumbs :items="breadcrumbItems" />
</template>

<script setup lang="ts">
import { BreadcrumbItem } from '@kong/kongponents'

const breadcrumbItems: BreadcrumbItem[] = [{
  key: 'home',
  to: { path: '/' },
  title: 'Go Home',
  text: 'Home',
},
{
  key: 'button',
  to: { path: '/components/alert.html' },
  title: 'Components',
  text: 'Components'
},
{
  key: 'not-here',
  title: 'Non-link item',
  text: 'Non-link item'
},
{
  key: 'here',
  to: { path: '/components/breadcrumb.html' },
  title: 'Breadcrumb',
  text: 'Breadcrumb'
}]
</script>

The to property can be a Vue router object or a URL. In most scenarios you will build your breadcrumb items using your Vue application routes.

• Google /
• Kongponents /

<template>
  <KBreadcrumbs :items="breadcrumbItems" />
</template>

<script lang="ts" setup>
import { BreadcrumbItem } from '@kong/kongponents'

const breadcrumbItems: BreadcrumbItem[] = [{
  key: 'google',
  to: 'https://google.com',
  title: 'Search at Google',
  text: 'Google'
},
{
  key: 'kongponents',
  to: { path: '/' },
  title: 'Kongponents',
  text: 'Kongponents'
}]
</script>

itemMaxWidth

Maximum width of each breadcrumb item for truncating to ellipsis. Defaults to 100px.

• Overview /
• Services /
• f67a3ead-dfb9-4ef9-8cda-6646bc4db950 /

<KBreadcrumbs
  item-max-width="50px"
  :items="breadcrumbItems"
/>

Slots

divider

Content to be displayed between breadcrumb items, defaults to a forward slash /.

• Home ›
• Components ›
• Non-link item
  ›
• Breadcrumb ›

<KBreadcrumbs :items="breadcrumbItems">
  <template #divider>
    <!-- chevron right html symbol -->
    &#8250;
  </template>
</KBreadcrumbs>

icon

You can slot individual breadcrumb icon content. Each breadcrumb will have an icon slot named after the item key or index (if no key provided).

• Home /
• Breadcrumbs /

<template>
  <KBreadcrumbs :items="breadcrumbItems">
    <template #icon-home>
      <KongIcon :color="KUI_COLOR_TEXT_DECORATIVE_AQUA" />
    </template>
    <template #icon-breadcrumb-1>
      <DataObjectIcon :color="KUI_COLOR_TEXT_DECORATIVE_PURPLE" />
    </template>
  </KBreadcrumbs>
</template>

<script setup lang="ts">
import { BreadcrumbItem } from '@kong/kongponents'

const breadcrumbItems: BreadcrumbItem[] = [{
  key: 'home',
  to: { path: '/' },
  title: 'Go Home',
  text: 'Home',
},
{
  to: { path: '/components/breadcrumbs.html' },
  title: 'Go to Breadcrumbs',
  text: 'Breadcrumbs'
}]
</script>