@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 current to 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>

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>

BreadcrumbLink + BreadcrumbSeparator (React)

Alternative composition pattern using explicit BreadcrumbLink and BreadcrumbSeparator subcomponents. 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.
← Badge Button →