@usevyre/react@usevyre/vue

Breadcrumb

A navigational trail showing the user's location within a hierarchy. The last item is automatically marked as the current page with aria-current="page".

Basic

Compose BreadcrumbItem elements inside Breadcrumb. Add currentto the last item to indicate the active page.

import { Breadcrumb, BreadcrumbItem } from "@usevyre/react";

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem current>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

<script setup>
import { Breadcrumb, BreadcrumbItem } from "@usevyre/vue";
</script>
<template>
  <Breadcrumb>
    <BreadcrumbItem href="/">Home</BreadcrumbItem>
    <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
    <BreadcrumbItem :current="true">Breadcrumb</BreadcrumbItem>
  </Breadcrumb>
</template>

Custom separator

The separator prop accepts any string or React node.

{/* Chevron › separator */}
<Breadcrumb separator="›">
  <BreadcrumbItem href="/dashboard">Dashboard</BreadcrumbItem>
  <BreadcrumbItem current>Settings</BreadcrumbItem>
</Breadcrumb>

{/* Dot · separator */}
<Breadcrumb separator="·">
  <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
  <BreadcrumbItem current>API</BreadcrumbItem>
</Breadcrumb>

<Breadcrumb separator="›">
  <BreadcrumbItem href="/dashboard">Dashboard</BreadcrumbItem>
  <BreadcrumbItem :current="true">Settings</BreadcrumbItem>
</Breadcrumb>

BreadcrumbLink + BreadcrumbSeparator (React)

Alternative composition pattern using explicit BreadcrumbLink and BreadcrumbSeparatorsubcomponents. Useful when you need full control over link rendering (e.g. with a router). Vue uses href on BreadcrumbItem directly.

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@usevyre/react";

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem aria-current="page">Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Props — Breadcrumb

Props

Prop	Type	Default	Description
`separator`	`ReactNode / string`	`"/"`	Character or element rendered between items.
`class / className`	`string`	`—`	Additional CSS class on the nav element.

Props — BreadcrumbItem

Props

Prop	Type	Default	Description
`href`	`string`	`—`	When provided, renders an anchor tag. Omit for the current (last) item.
`current`	`boolean`	`false`	Marks the item with aria-current='page' and applies active styling.
`class / className`	`string`	`—`	Additional CSS class.

Props — BreadcrumbLink (React only)

Props

Prop	Type	Default	Description
`href`	`string`	`—`	URL the link navigates to. Required.
`class / className`	`string`	`—`	Additional CSS class.

AI Context

Common AI mistakes

Using plain <a> tags inside Breadcrumb→ Use BreadcrumbItem > BreadcrumbLink for each crumb

Quick examples

Basic breadcrumb

<Breadcrumb>
  <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem aria-current="page">Button</BreadcrumbItem>
</Breadcrumb>

← Badge Button →