Breadcrumb

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download breadcrumb -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { BreadcrumbList } from "@/components/ui/breadcrumb";
import { BreadcrumbItem } from "@/components/ui/breadcrumb";
import { BreadcrumbLink } from "@/components/ui/breadcrumb";
import { BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { BreadcrumbPage } from "@/components/ui/breadcrumb";
import * as UI from "@/components/ui/breadcrumb";

const Component = UI.Breadcrumb;

const args = {
  "current": "Components",
  "separator": "/",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Breadcrumb
    ><BreadcrumbList
      ><BreadcrumbItem
        ><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem
      ><BreadcrumbSeparator>{{ args.separator }}</BreadcrumbSeparator
      ><BreadcrumbItem
        ><BreadcrumbPage>{{ args.current }}</BreadcrumbPage></BreadcrumbItem
      ></BreadcrumbList
    ></Breadcrumb
  >
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

BreadcrumbList
BreadcrumbItem
BreadcrumbLink
BreadcrumbPage
BreadcrumbSeparator
BreadcrumbEllipsis

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

BreadcrumbEllipsis
BreadcrumbItem
BreadcrumbLink
BreadcrumbList
BreadcrumbPage
BreadcrumbSeparator

Examples

Default

<script setup lang="ts">
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { BreadcrumbList } from "@/components/ui/breadcrumb";
import { BreadcrumbItem } from "@/components/ui/breadcrumb";
import { BreadcrumbLink } from "@/components/ui/breadcrumb";
import { BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { BreadcrumbPage } from "@/components/ui/breadcrumb";
import * as UI from "@/components/ui/breadcrumb";

const Component = UI.Breadcrumb;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Breadcrumb v-bind="args"
    ><BreadcrumbList
      ><BreadcrumbItem
        ><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem
      ><BreadcrumbSeparator /><BreadcrumbItem
        ><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem
      ><BreadcrumbSeparator /><BreadcrumbItem
        ><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem
      ></BreadcrumbList
    ></Breadcrumb
  >
</template>

With Dropdown

<script setup lang="ts">
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { BreadcrumbList } from "@/components/ui/breadcrumb";
import { BreadcrumbItem } from "@/components/ui/breadcrumb";
import { BreadcrumbLink } from "@/components/ui/breadcrumb";
import { BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { DropdownMenu } from "@/components/ui/dropdown-menu";
import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb";
import { DropdownMenuContent } from "@/components/ui/dropdown-menu";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { BreadcrumbPage } from "@/components/ui/breadcrumb";
import * as UI from "@/components/ui/breadcrumb";

const Component = UI.Breadcrumb;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Breadcrumb
    ><BreadcrumbList
      ><BreadcrumbItem
        ><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem
      ><BreadcrumbSeparator /><BreadcrumbItem
        ><DropdownMenu
          ><DropdownMenuTrigger class="flex items-center gap-1"
            ><BreadcrumbEllipsis /></DropdownMenuTrigger
          ><DropdownMenuContent align="start"
            ><DropdownMenuItem>Documentation</DropdownMenuItem
            ><DropdownMenuItem>Themes</DropdownMenuItem
            ><DropdownMenuItem>GitHub</DropdownMenuItem></DropdownMenuContent
          ></DropdownMenu
        ></BreadcrumbItem
      ><BreadcrumbSeparator /><BreadcrumbItem
        ><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem
      ></BreadcrumbList
    ></Breadcrumb
  >
</template>

Collapsed

<script setup lang="ts">
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { BreadcrumbList } from "@/components/ui/breadcrumb";
import { BreadcrumbItem } from "@/components/ui/breadcrumb";
import { BreadcrumbLink } from "@/components/ui/breadcrumb";
import { BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb";
import { BreadcrumbPage } from "@/components/ui/breadcrumb";
import * as UI from "@/components/ui/breadcrumb";

const Component = UI.Breadcrumb;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

Custom Separator

<script setup lang="ts">
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { BreadcrumbList } from "@/components/ui/breadcrumb";
import { BreadcrumbItem } from "@/components/ui/breadcrumb";
import { BreadcrumbLink } from "@/components/ui/breadcrumb";
import { BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { BreadcrumbPage } from "@/components/ui/breadcrumb";
import * as UI from "@/components/ui/breadcrumb";

const Component = UI.Breadcrumb;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

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

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

BreadcrumbEllipsis

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

BreadcrumbItem

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

BreadcrumbLink

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

BreadcrumbList

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

BreadcrumbPage

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.