Navigation

Breadcrumbs

A trail of ancestor links with an automatic current-page state on the final item.

BreadcrumbsBreadcrumbsItem

Preview

Usage

tsx

import { Breadcrumbs, BreadcrumbsItem } from "@vesture/react";

<Breadcrumbs>
  <BreadcrumbsItem href="/">Home</BreadcrumbsItem>
  <BreadcrumbsItem href="/settings">Settings</BreadcrumbsItem>
  <BreadcrumbsItem>Profile</BreadcrumbsItem>
</Breadcrumbs>

Behavior

Renders <nav aria-label="Breadcrumb"><ol>. The last child is automatically marked current (rendered as a <span aria-current="page">) regardless of whether it has an href.

Props

Breadcrumbs

Prop	Type	Default	Description
separator	ReactNode	"/"	Rendered between items in an aria-hidden <li>.

BreadcrumbsItem

Prop	Type	Default	Description
href	string	—	Renders as a link unless it's the last item.
...rest	AnchorHTMLAttributes<HTMLAnchorElement>	—	Spread onto the <a>.