Flux

Breadcrumb item ​

A breadcrumb item is a single step in a Breadcrumb trail. Provide a to to render it as a router link, an href to render it as an external anchor, or neither to mark it as the current page — in which case it becomes plain text with aria-current="page".

WARNING

This component is best used within a Breadcrumb.

Required icons

slash-forward

Props

label?: string
The label of the item.

icon?: FluxIconName
An optional icon shown before the label.

to?: FluxTo
A router location. When set, the item renders as a router link.

href?: string
An external URL. When set, the item renders as an anchor.

Emits

click: [MouseEvent]
Triggered when the item is clicked.

Slots

default
The label content of the item. Falls back to the label prop.

Examples ​

Current page

A breadcrumb item representing the current page.

<template>
    <Preview>
        <FluxBreadcrumb>
            <FluxBreadcrumbItem
                href="#"
                label="Library"/>

            <FluxBreadcrumbItem
                href="#"
                label="Components"/>

            <FluxBreadcrumbItem label="Breadcrumb" />
        </FluxBreadcrumb>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxBreadcrumb, FluxBreadcrumbItem } from '@flux-ui/components';
</script>

Used components ​