Flux

Breadcrumb ​

A breadcrumb shows users where they are within a hierarchy and lets them navigate back to any ancestor. Each step is a Breadcrumb item or a Breadcrumb flyout; a non-linked item represents the current page and is rendered as plain, non-interactive text with aria-current="page". Separators are inserted automatically between steps.

Steps are not limited to a label and icon. An item can hold an avatar, a badge or a tag through its leading and trailing slots, and a Breadcrumb flyout turns a step into a dropdown so users can switch to a sibling without leaving the trail.

Required icons

angle-right
ellipsis-h

Props

aria-label?: string
The accessible label of the breadcrumb navigation.
Default: Breadcrumb

collapse?: 'none' | 'start' | 'middle'
Collapses steps that do not fit into an overflow flyout menu. `start` keeps the trailing step(s) visible and folds from the front; `middle` keeps the first and last step visible and folds the middle. `none` lets the steps wrap onto a new line instead.
Default: none

collapse-label?: string
The accessible label of the button that reveals the collapsed steps.
Default: Show more

separator?: FluxIconName
The icon rendered between steps.
Default: angle-right

Slots

default
The trail of the breadcrumb, rendered as [Breadcrumb item](./item) and [Breadcrumb flyout](./flyout) components.

Examples ​

Basic

A breadcrumb trail with links.

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

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

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

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

With icons

An icon per step makes the trail easier to scan.

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

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

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

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

Custom separator

The separator defaults to a chevron. Set separator to any icon, such as slash-forward, to change it.

<template>
    <FluxBreadcrumb separator="slash-forward">
        <FluxBreadcrumbItem
            href="#"
            label="Documents"/>

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

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

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

Collapse the middle

Set collapse="middle" to keep the first and last step visible and fold the rest into an overflow menu when the trail runs out of space. Collapsed Breadcrumb flyout steps become nested submenus.

<template>
    <div style="max-width: 360px">
        <FluxBreadcrumb collapse="middle">
            <FluxBreadcrumbItem
                href="#"
                icon="house"
                label="Home"/>

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

            <FluxBreadcrumbItem
                href="#"
                label="Acme Corporation"/>

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

            <FluxBreadcrumbItem
                href="#"
                label="Website Redesign"/>

            <FluxBreadcrumbItem label="Homepage"/>
        </FluxBreadcrumb>
    </div>
</template>

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

Collapse from the start

Set collapse="start" to keep only the trailing steps visible and fold everything before them into an overflow menu.

<template>
    <div style="max-width: 360px">
        <FluxBreadcrumb collapse="start">
            <FluxBreadcrumbItem
                href="#"
                icon="house"
                label="Home"/>

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

            <FluxBreadcrumbItem
                href="#"
                label="Acme Corporation"/>

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

            <FluxBreadcrumbItem
                href="#"
                label="Website Redesign"/>

            <FluxBreadcrumbItem label="Homepage"/>
        </FluxBreadcrumb>
    </div>
</template>

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

Rich trail

Combine icons, an avatar, a badge and a flyout switcher in a single trail.

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

        <FluxBreadcrumbFlyout label="Clients">
            <FluxMenuItem
                icon-leading="building"
                is-active
                label="Clients"/>

            <FluxMenuItem
                icon-leading="folder"
                label="Projects"/>

            <FluxMenuItem
                icon-leading="file-lines"
                label="Invoices"/>
        </FluxBreadcrumbFlyout>

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

            <template #trailing>
                <FluxBadge
                    color="success"
                    label="VIP"
                    size="small"/>
            </template>
        </FluxBreadcrumbItem>
    </FluxBreadcrumb>
</template>

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

TIP

Collapsing measures the available width, so the breadcrumb needs a bounded container to fold. Place it in a layout that constrains its width (a header bar, a card) rather than an intrinsically sized wrapper.

Used components ​