Flux

Breadcrumb flyout ​

A breadcrumb flyout is a step that opens a dropdown instead of navigating, letting users switch to a sibling in the middle of a Breadcrumb trail — a different client, project or account — without leaving the current view. It renders a chevron to signal the dropdown and, when collapsed into an overflow menu, becomes a nested submenu.

Provide the menu entries in the default slot as Menu item components; the wrapping Menu is added for you.

WARNING

This component is best used within a Breadcrumb.

Required icons

angle-down
angle-right

Props

label?: string
The label of the step, shown next to the chevron.

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

aria-label?: string
The accessible label of the trigger button. Falls back to the label prop.

Slots

default
The menu items shown in the dropdown, rendered as [Menu item](../menu/item) (and [Menu group](../menu/group) / separator) components. The wrapping menu is provided for you.

leading
Content rendered before the label, such as an [avatar](../avatar).

Examples ​

Path switcher

Group the sibling options, and add actions such as creating a new one below a separator.

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

        <FluxBreadcrumbFlyout label="Acme Corporation">
            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="building"
                    is-active
                    label="Acme Corporation"/>

                <FluxMenuItem
                    icon-leading="building"
                    label="Globex"/>

                <FluxMenuItem
                    icon-leading="building"
                    label="Initech"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="plus"
                    label="New client"/>
            </FluxMenuGroup>
        </FluxBreadcrumbFlyout>

        <FluxBreadcrumbItem label="Website Redesign"/>
    </FluxBreadcrumb>
</template>

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

With an avatar

Use the leading slot to switch between people, showing an avatar on the trigger.

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

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

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

            <FluxMenuItem
                image-src="https://i.pravatar.cc/64?img=1"
                is-active
                label="Naomi Watts"/>

            <FluxMenuItem
                image-src="https://i.pravatar.cc/64?img=2"
                label="Oscar Nunez"/>

            <FluxMenuItem
                image-src="https://i.pravatar.cc/64?img=3"
                label="Priya Patel"/>
        </FluxBreadcrumbFlyout>
    </FluxBreadcrumb>
</template>

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

Used components ​