🌏 Translated with the assistance of DeepSeek and ChatGPT

Breadcrumb

It's hard to associate "breadcrumb" with this UI component at all...

Basic Usage

Use Breadcrumb and BreadcrumbItem to build a breadcrumb navigation bar.

By default, the last item is rendered as plain text. This can be changed via the renderLastText property of Breadcrumb.

BreadcrumbItem renders an option as an <a> tag or a Vue Router RouterLink component based on its href or route property.

WARNING

href and route are directly rendered into the <a> tag. Passing values like javascript:alert(1) or malicious URLs may lead to XSS or open redirect vulnerabilities.

• Home
• >
• Breadcrumb

<template>
	<px-breadcrumb @select="selectHandler">
		<px-breadcrumb-item index="Home" href="/pixelium-design/" target="_self">
			<template #icon>
				<IconHome></IconHome>
			</template>
			Home
		</px-breadcrumb-item>
		<px-breadcrumb-item index="Current" label="Breadcrumb"></px-breadcrumb-item>
	</px-breadcrumb>
</template>

<script setup lang="ts">
import { IconHome } from '@pixelium/web-vue/icon-hn/es'

const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}
</script>

Disabled and Non-clickable

Use the disabled property of BreadcrumbItem to disable an item, and clickable to control whether a child item is clickable.

• Town Hall
• >
• Keep
• >
• Castle

• Great Hall
• >
• Stronghold
• >
• Fortress

<template>
	<px-space direction="vertical">
		<px-breadcrumb @select="selectHandler">
			<px-breadcrumb-item disabled index="Town Hall">Town Hall</px-breadcrumb-item>
			<px-breadcrumb-item disabled index="Keep">Keep</px-breadcrumb-item>
			<px-breadcrumb-item disabled index="Castle">Castle</px-breadcrumb-item>
		</px-breadcrumb>
		<px-breadcrumb @select="selectHandler">
			<px-breadcrumb-item :clickable="false" index="Great Hall">Great Hall</px-breadcrumb-item>
			<px-breadcrumb-item :clickable="false" index="Stronghold">Stronghold</px-breadcrumb-item>
			<px-breadcrumb-item :clickable="false" index="Fortress">Fortress</px-breadcrumb-item>
		</px-breadcrumb>
	</px-space>
</template>

<script setup lang="ts">
const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}
</script>

Options Property

Use the options property to create a breadcrumb navigation bar. The string value and index field of an option are used as unique identifiers. It is recommended to ensure their uniqueness.

• Home
• >
• Breadcrumb

<template>
	<px-breadcrumb @select="selectHandler" :options="options"> </px-breadcrumb>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}

const options = ref([{ index: 'Home', label: 'Home', href: '/pixelium-design/' }, 'Breadcrumb'])
</script>

Separator

Set the separator via the splitter property or the splitter slot of Breadcrumb.

• Home
• /
• Dashboard
• /
• Statistic

• Home
• →
• Dashboard
• →
• Statistic

<template>
	<px-space direction="vertical">
		<px-breadcrumb splitter="/" @select="selectHandler">
			<px-breadcrumb-item index="Home">Home</px-breadcrumb-item>
			<px-breadcrumb-item index="Dashboard">Dashboard</px-breadcrumb-item>
			<px-breadcrumb-item index="Statistic">Statistic</px-breadcrumb-item>
		</px-breadcrumb>
		<px-breadcrumb @select="selectHandler">
			<px-breadcrumb-item index="Home">Home</px-breadcrumb-item>
			<px-breadcrumb-item index="Dashboard">Dashboard</px-breadcrumb-item>
			<px-breadcrumb-item index="Statistic">Statistic</px-breadcrumb-item>
			<template #splitter> → </template>
		</px-breadcrumb>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}
</script>

API

BreadcrumbProps

Attribute	Type	Optional	Default	Description	Version
options	(string | BreadcrumbOption)[]	True		breadcrumb items.	0.1.0
splitter	string	True	'>'	separator between items.	0.1.0
renderLastText	boolean	True	true	whether to render the last item as plain text.	0.1.0

BreadcrumbEvents

Event	Parameter	Description	Version
select	index: string | number | symbol, event: MouseEvent	callback triggered when a breadcrumb item is selected.	0.1.0

BreadcrumbSlots

Slot	Parameter	Description	Version
default		slot for breadcrumb items.	0.1.0
splitter		slot for the separator.	0.1.0

BreadcrumbItemProps

Attribute	Type	Optional	Default	Description	Version
label	string	True		Text label.	0.1.0
index	string | number | symbol	False		Unique identifier.	0.1.0
disabled	boolean	True	false	Whether the item is disabled.	0.1.0
clickable	boolean	True	true	Whether the item is clickable.	0.1.0
href	string	True		The href attribute for the <a> tag. When provided, the text label will be rendered as an <a> element.	0.1.0
route	string | object	True		The to parameter for Vue Router's RouterLink. When provided, the text label will be rendered as a RouterLink <a> element. If using this property, ensure Vue Router is registered globally in your Vue App.	0.1.0
target	string	True		The target attribute for the <a> tag.	0.1.0

BreadcrumbItemSlots

Slot	Parameter	Description	Version
default		Slot for the text label.	0.1.0
icon		Slot for the icon.	0.1.0

BreadcrumbOption

export interface BreadcrumbOption extends NavigationOption {
	disabled?: boolean
	clickable?: boolean
	href?: string
	route?: string | object
	target?: string
}

export interface NavigationOption {
	index: string | number | symbol
	label?: string
}