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".

Beyond a label and icon, an item can render richer content through its leading and trailing slots — an avatar for a person, a badge for a status, a tag for a label — or fully custom markup through the default slot. When the item is collapsed into an overflow menu, its label, icon and leading slot are shown as a menu entry.

WARNING

This component is best used within a Breadcrumb.

Required icons

angle-right

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.

is-current?: boolean
Explicitly marks the item as the current page (aria-current="page"). Defaults to true when the item has no link, so set it to mark a linked last item as current, or to keep a non-linked item from being treated as current.

Emits

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

Slots

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

leading
Content rendered before the label, such as an [avatar](../avatar), [badge](../badge) or [tag](../tag). Keep it decorative (no link) to avoid nesting interactive elements.

trailing
Content rendered after the label, such as a [badge](../badge) or [tag](../tag).

Examples ​

Current page

Using is-current to mark a linked last item as the current page.

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

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

        <FluxBreadcrumbItem
            href="#"
            label="Breadcrumb"
            is-current/>
    </FluxBreadcrumb>
</template>

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

With icons

Add an icon to each item to make the trail easier to scan.

<template>
    <FluxBreadcrumb>
        <FluxBreadcrumbItem
            href="#"
            icon="house"
            label="Home"/>

        <FluxBreadcrumbItem
            href="#"
            icon="folder"
            label="Projects"/>

        <FluxBreadcrumbItem
            icon="file-lines"
            label="Report"/>
    </FluxBreadcrumb>
</template>

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

With an avatar

Use the leading slot to render an avatar for a person or organisation.

<template>
    <FluxBreadcrumb>
        <FluxBreadcrumbItem
            href="#"
            icon="house"
            label="Home"/>

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

        <FluxBreadcrumbItem label="Naomi Watts">
            <template #leading>
                <FluxAvatar
                    alt="Naomi Watts"
                    fallback-initials="NW"
                    :size="21"/>
            </template>
        </FluxBreadcrumbItem>
    </FluxBreadcrumb>
</template>

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

With a badge or tag

Use the trailing slot to annotate a step with a badge or tag.

<template>
    <FluxBreadcrumb>
        <FluxBreadcrumbItem
            href="#"
            icon="house"
            label="Home"/>

        <FluxBreadcrumbItem
            href="#"
            label="Flux UI">
            <template #trailing>
                <FluxTag
                    color="info"
                    label="Beta"
                    size="small"/>
            </template>
        </FluxBreadcrumbItem>

        <FluxBreadcrumbItem label="Roadmap">
            <template #trailing>
                <FluxBadge
                    color="primary"
                    label="3"
                    size="small"/>
            </template>
        </FluxBreadcrumbItem>
    </FluxBreadcrumb>
</template>

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

Custom label

Use the default slot to render custom markup instead of the label prop.

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

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

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

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

Used components ​