Kongponents

# Breadcrumbs

Krumbs is a breadcrumbs component that takes an array of route objects and generates a list of links. You can pass both vue router (opens new window) route objects or pass your own url.

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

<script>
export default {
  data () {
    return {
      breadcrumbItems: [
        {
          key: 'home',
          to: { path: '/' },
          title: 'Go Home',
          text: 'Home',
          icon: 'kong'
        },
        {
          key: 'button',
          to: { path: '/components/breadcrumbs.html' },
          title: 'Go to Button',
          text: 'Breadcrumbs'
        }
      ]
    }
  }
}
</script>

# Props

# items

An array of Breadcrumb items

<!--
 * @typedef {Object} Item - breadcrumb item holding router-link properties
 * @property {RawLocation} to - router-link 'to' object or href string
 * @property {string} text - The anchor text displayed (optional, can be used with or without 'icon')
 * @property {string} title - The anchor title shown when hovering the link
 * @property {string} icon - Display a KIcon before the anchor title (optional, can be used with or without 'text')
 * @property {string} [key] - An ID when the list is generated. Defaults to text if not set.
 * @property {string} [maxWidth] - maxWidth of item, overrides itemMaxWidth
 -->
<Krumbs :items="[{ key: 'home', to: { path: '/' }, title: 'Home', icon: 'kong', text: 'Home' }]" />

# Breadcrumb content

Each breadcrumb item can display text, an icon, or both.

The to property can be a Vue route or traditional URL. When using a URL though the target will be blank and a new window will open. In most scenarios you will build your breadcrumb items using your Vue application routes.

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

<script>
export default {
  data () {
    return {
      breadcrumbItems: [
        {
          key: 'home',
          to: { path: '/' },
          title: 'Home',
          text: 'Home'
        },
        {
          key: 'google',
          to: 'https://google.com',
          title: 'Search at Google',
          text: 'Google'
        }
      ]
    }
  }
}
</script>

# itemMaxWidth

Maximum width of each breadcrumb item for truncating to ellipsis.

<Krumbs :items="longBreadcrumbs" item-max-width="16ch" />

← Button →