Breadcrumb

A neo-brutalist breadcrumb navigation component built on Reka UI's breadcrumb primitives, suitable for displaying multi-level page trees, especially as a standard navigation element in complex nested scenarios such as admin dashboards.

Default links render as solid labels with a full border, background, and hard shadow. Hover changes the background; pressing moves the text and border together toward the shadow and hides it. The current page uses an accent fill with a smaller hard shadow. The folder variant retains its open-bottom tab appearance and flat surface, with background feedback on hover.

Demo

Preview

1. 首页
2. /
3. 组件
4. /
5. 更多
6. /
7. 导航
8. /
9. 面包屑

Installation

pnpm dlx brutx-vue@latest add breadcrumb

Usage

<script setup>
import {
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbPage,
    BreadcrumbSeparator,
    BreadcrumbEllipsis
} from 'brutx-ui-vue'
</script>

<template>
    <Breadcrumb>
        <BreadcrumbList>
            <BreadcrumbItem>
                <BreadcrumbLink href="/">Home</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <BreadcrumbLink href="/components">Components</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
            </BreadcrumbItem>
        </BreadcrumbList>
    </Breadcrumb>
</template>

Collapsed Ellipsis

When there are many page levels, use BreadcrumbEllipsis to collapse less important intermediate pages. It is a purely presentational ellipsis indicator (role="presentation", no interactive semantics); wrap it with a DropdownMenu or similar trigger if click-to-expand behavior is needed.

<template>
    <Breadcrumb>
        <BreadcrumbList>
            <BreadcrumbItem>
                <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <!-- Collapsed ellipsis indicator (presentational, non-interactive) -->
                <BreadcrumbEllipsis />
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
                <BreadcrumbPage>Current Page</BreadcrumbPage>
            </BreadcrumbItem>
        </BreadcrumbList>
    </Breadcrumb>
</template>

Sub-components

Component	Description
Breadcrumb	Root container
BreadcrumbList	Breadcrumb list container
BreadcrumbItem	Single breadcrumb item container
BreadcrumbLink	Clickable link item
BreadcrumbPage	Current page indicator (non-clickable)
BreadcrumbSeparator	Separator, renders a forward slash / by default
BreadcrumbEllipsis	Ellipsis indicator (presentational) for collapsing intermediate levels

API Reference

Breadcrumb

Breadcrumb — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the breadcrumb navigation <nav> root.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/Breadcrumb.vue Resolved value undefined Source Breadcrumb.vue:7 packages/ui/src/components/breadcrumb/Breadcrumb.vue

Breadcrumb — Slots

Name	Signature or type	Description
#default	{}	Breadcrumb navigation children, usually containing BreadcrumbList.
Details Declared type {} Source Breadcrumb.vue packages/ui/src/components/breadcrumb/Breadcrumb.vue

BreadcrumbEllipsis

BreadcrumbEllipsis — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the ellipsis presentation element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue Resolved value undefined Source BreadcrumbEllipsis.vue:10 packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
iconSize	IconSize | undefined	"md"	The size of the default ellipsis icon, using the project IconSize presets.
Details Declared type IconSize | undefined Literal values "2xl" "lg" "md" "sm" "xl" "xs" Referenced types IconSize Type definition — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> Default value details Declaration 'md' Source: packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue Resolved value "md" Source BreadcrumbEllipsis.vue:11 packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue

BreadcrumbEllipsis — Slots

Name	Signature or type	Description
#default	{}	Replaces the default MoreHorizontal icon; custom content should provide an appropriate accessible name.
Details Declared type {} Source BreadcrumbEllipsis.vue packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue

BreadcrumbItem

BreadcrumbItem — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the <li> element for one breadcrumb item.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/BreadcrumbItem.vue Resolved value undefined Source BreadcrumbItem.vue:7 packages/ui/src/components/breadcrumb/BreadcrumbItem.vue

BreadcrumbItem — Slots

Name	Signature or type	Description
#default	{}	One breadcrumb item, usually a link or the current page.
Details Declared type {} Source BreadcrumbItem.vue packages/ui/src/components/breadcrumb/BreadcrumbItem.vue

BreadcrumbLink

BreadcrumbLink — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the link or to the child element composed through asChild.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/BreadcrumbLink.vue Resolved value undefined Source BreadcrumbLink.vue:8 packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
asChild	boolean | undefined	false	Uses the Reka UI Primitive child-composition pattern to merge this component’s props and behavior into its single child.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/breadcrumb/BreadcrumbLink.vue Resolved value false Source BreadcrumbLink.vue packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
as	AsTag | Component | undefined	"a"	Selects the HTML tag or component used for the link; the child determines the rendered target when asChild is enabled.
Details Declared type AsTag | Component | undefined Literal values "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" Default value details Declaration 'a' Source: packages/ui/src/components/breadcrumb/BreadcrumbLink.vue Resolved value "a" Source BreadcrumbLink.vue packages/ui/src/components/breadcrumb/BreadcrumbLink.vue

BreadcrumbLink — Slots

Name	Signature or type	Description
#default	{}	The visible link text or content.
Details Declared type {} Source BreadcrumbLink.vue packages/ui/src/components/breadcrumb/BreadcrumbLink.vue

BreadcrumbList

BreadcrumbList — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the ordered list <ol>.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/BreadcrumbList.vue Resolved value undefined Source BreadcrumbList.vue:9 packages/ui/src/components/breadcrumb/BreadcrumbList.vue
variant	"default" | "folder" | undefined	"default"	default uses the regular list style; folder renders links as folder-tab labels.
Details Declared type "default" | "folder" | undefined Literal values "default" "folder" Default value details Declaration 'default' Source: packages/ui/src/components/breadcrumb/BreadcrumbList.vue Resolved value "default" Source BreadcrumbList.vue:11 packages/ui/src/components/breadcrumb/BreadcrumbList.vue

BreadcrumbList — Slots

Name	Signature or type	Description
#default	{}	Breadcrumb items and separators; children should use list-item components valid inside an ordered list.
Details Declared type {} Source BreadcrumbList.vue packages/ui/src/components/breadcrumb/BreadcrumbList.vue

BreadcrumbPage

BreadcrumbPage — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the current-page <span>.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/BreadcrumbPage.vue Resolved value undefined Source BreadcrumbPage.vue:7 packages/ui/src/components/breadcrumb/BreadcrumbPage.vue

BreadcrumbPage — Slots

Name	Signature or type	Description
#default	{}	The current page label. The component marks it with aria-current="page" and does not render it as a link.
Details Declared type {} Source BreadcrumbPage.vue packages/ui/src/components/breadcrumb/BreadcrumbPage.vue

BreadcrumbSeparator

BreadcrumbSeparator — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the separator list item.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue Resolved value undefined Source BreadcrumbSeparator.vue:7 packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue

BreadcrumbSeparator — Slots

Name	Signature or type	Description
#default	{}	Custom separator content; a forward slash / is shown when omitted. The separator is hidden from the accessibility tree.
Details Declared type {} Source BreadcrumbSeparator.vue packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue

Accessibility

• Keyboard operation: Link items support Tab key navigation and Enter key activation
• ARIA attributes: Automatically adds aria-label="Breadcrumb" to the navigation container and aria-current="page" to identify the current page
• Semantic structure: Wrapped in a <nav> element with an <ol> list structure conforming to the WAI-ARIA breadcrumb specification