KongponentsBreadcrumbs
KBreadcrumbs is a breadcrumbs component that takes an array of route objects and generates a list of links. You can pass both vue router route objects or pass your own url.
html
<template>
<KBreadcrumbs :items="breadcrumbItems" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const 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'
}
]
return { breadcrumbItems }
}
})
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Props
items
An array of Breadcrumb items
html
<!--
* @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
-->
<KBreadcrumbs :items="[{ key: 'home', to: { path: '/' }, title: 'Home', icon: 'kong', text: 'Home' }]" />1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Breadcrumb content
Each breadcrumb item can display text, an icon, or both.
Breadcrumb link
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.
html
<template>
<KBreadcrumbs :items="breadcrumbItems" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const breadcrumbItems = [
{
key: 'home',
to: { path: '/' },
title: 'Home',
text: 'Home'
},
{
key: 'google',
to: 'https://google.com',
title: 'Search at Google',
text: 'Google'
}
]
return { breadcrumbItems }
}
})
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
itemMaxWidth
Maximum width of each breadcrumb item for truncating to ellipsis.
html
<KBreadcrumbs :items="longBreadcrumbs" item-max-width="16ch" />1