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; the last item represents the current page and is rendered as plain, non-interactive text with aria-current="page". Separators are inserted automatically between items.

1. Home
2. Users
3. Bas Milius
4. Profile

Required icons

slash-forward

Props

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

Slots

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

Examples

Basic

A breadcrumb trail with router links.

Preview

1. Documents
2. Invoices
3. 2026

Code

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

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

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

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

With icons

A breadcrumb trail with an icon per step.

Preview

1. Home
2. Projects
3. Report

Code

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

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

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

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

Used components

• Breadcrumb item