ComponentsNavigation

Breadcrumb

Shows where a page sits in a hierarchy and offers a way up. Data-driven or compound, collapses long trails into a menu, jumps to sibling records, and outputs JSON-LD on websites.

Radix Dropdown Menu (hidden items, siblings) components/breadcrumb.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Breadcrumb } from "@vamos-ui/react";

<Breadcrumb items={[
  { label: "Companies", href: "/companies" },
  { label: "Northpoint", href: "/companies/northpoint" },
  { label: "Contacts" },
]} />

Examples

Collapsed

maxItems keeps the first crumb and the last maxItems − 2; the middle goes into a "Show hidden pages" menu.

Sizes and separator

size sm for dense headers; separator replaces the chevron (which flips in RTL).

Compound API

Compose the parts for custom content. Long labels truncate at 16rem and keep the full text in title.

Website with JSON-LD

jsonLd outputs a schema.org BreadcrumbList; baseUrl makes the URLs absolute.

API

Breadcrumb

Prop	Type	Default
`items` Data-driven trail; the last item is the current page. Omit for the compound API.	`{ label; href?; icon?; menu?: { label; href; current? }[] }[]`	`—`
`maxItems` Collapse the middle when there are more items (first + last maxItems − 2 stay).	`number`	`—`
`separator` Separator between crumbs (hidden from assistive tech).	`ReactNode`	`ChevronRight`
`size` Text and icon size.	`"sm" \| "md"`	`"md"`
`jsonLd` Websites: output BreadcrumbList JSON-LD (items with href and a string label).	`boolean`	`false`
`baseUrl` Origin prepended to relative hrefs in the JSON-LD.	`string`	`—`
`labels` Overrides: nav name ("Breadcrumb"), "Show hidden pages", "Pages next to {label}".	`{ label?; showHidden?; siblings? }`	`—`

BreadcrumbLink

Prop	Type	Default
`href` Rendered with the app's router Link; external URLs open in a new tab.	`string`	`—`
`icon` Leading icon.	`ReactNode`	`—`
`asChild` Render your own element with the crumb styles.	`boolean`	`false`

BreadcrumbPage

Prop	Type	Default
`icon` Leading icon.	`ReactNode`	`—`
`aria-current` Pass undefined for a non-link crumb in the middle.	`"page" \| undefined`	`"page"`

BreadcrumbEllipsis

Prop	Type	Default
`items` Hidden crumbs offered in a menu. Without items it is a static "…".	`{ label; href }[]`	`—`

BreadcrumbList · BreadcrumbItem · BreadcrumbSeparator

Prop	Type	Default
`…props` ol, li and the aria-hidden separator li.	`HTML attributes`	`—`

Blog list

Button Group & Toggle Group