Breadcrumb

Stable

Navigation landmark showing the current page location in the site hierarchy. Breadcrumb.Page receives aria-current='page' and renders as a span — not a link. Separators are aria-hidden.

NavigationCompoundVhyxSeal

Interactive example

3-level hierarchy breadcrumb

Import

tsx

import { Breadcrumb } from '@vhyxui/react'

// Sub-components
// Breadcrumb.Item      — list item wrapper
// Breadcrumb.Link      — navigable ancestor link
// Breadcrumb.Page      — current page (not a link, aria-current="page")
// Breadcrumb.Ellipsis  — collapsed middle items indicator

Variants

Custom separator

With ellipsis for deep paths

Props

Prop	Type	Default	Description
`separator`	`React.ReactNode`	`"/"`	Separator element rendered between items. Automatically aria-hidden.
`maxItems`	`number`	—	Maximum items to show. Middle items collapse with Breadcrumb.Ellipsis.
`contract`	`Partial<ComponentContract>`	—	VhyxSeal contract override.

Breadcrumb.Link accepts href: string and standard anchor attributes.Breadcrumb.Page renders as a <span> — it is not a link.

Accessibility

Keyboard navigation

Key	Action
`Tab`	Move focus through breadcrumb links in order.
`Enter`	Activate the focused link.

Agent contract

Default VhyxSeal contract shipped with every Breadcrumb.

Default contract

{
  "type": "navigation",
  "intent": "navigate-breadcrumb",
  "description": "Displays the current page location in the site hierarchy with ancestor navigation links",
  "requires": [],
  "requiredPermissions": [],
  "consequence": "Navigates to an ancestor page when a breadcrumb link is activated",
  "affects": [
    "view"
  ],
  "reversible": true,
  "safetyLevel": "low",
  "requiresConfirmation": false,
  "destructive": false,
  "contractVersion": "0.0.1",
  "fingerprint": "vhyxs_186ba840"
}

Theming

Override these CSS tokens to theme Breadcrumb.

--vhyx-text-smFont size

--vhyx-color-text-subtleLink color

--vhyx-color-accentLink hover color

--vhyx-color-text-mutedSeparator color

--vhyx-color-textCurrent page text color

Examples

Documentation site breadcrumb

Docs navigation with section and page

E-commerce deep path

Collapsed middle path with ellipsis