Indicate the current page’s location within a navigational hierarchy.

Basic

<KtBreadcrumb :activeIndex="activeIndex" :breadcrumbs="links" />

links: [
	{
		title: 'Kotti',
		onClick: () => {
			activeIndex.value = 0,
			router.value.push('#')
		}
		isCompleted: true,
	},
	{
		title: 'Usage',
		onClick: () => {
			activeIndex.value = 1,
			router.value.push('#'),
		}
		isCompleted: true,
	},
	{
		title: 'Components',
		onClick: () => {
			activeIndex.value = 2,
			router.value.push('#')
		}
		isCompleted: true,
	},
	{
		title: 'Links',
		onClick: () => {
			activeIndex.value = 3
			router.value.push('#')
		},
		isCompleted: false,
	},
	{
		title: 'Breadcrumbs',
		onClick: () => {
			activeIndex.value = 4,
			router.value.push('#')
		}
		isDisabled: true,
	}
]

Separator Style

<KtBreadcrumb :breadcrumbs="links" :separator="textSeparator" />

// default separator
iconSeparator: {
	style: 'icon',
	value: 'chevron_right'
},
textSeparator: {
	style: 'text',
	value: '/'
},