Breadcrumbs

Breadcrumb trail. Free, MIT · Navigation and layout › Structure

Installation

npx valyro-cli@latest add breadcrumbs

npx shadcn@latest add https://valyro.xyz/r/breadcrumbs.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Breadcrumbs } from 'valyro-ui';

Prop	Type	Default
`items`	`BreadcrumbItem[]`		Path from the root; the last item is the current page. Or compose it as children: `Breadcrumbs.Item`.
`children`	`ReactNode`		The compound form instead of `items`: `Breadcrumbs.Item` elements, root first.
`separator`	`ReactNode`	`<ChevronRightIcon size={14} />`	Content between items, hidden from assistive tech.
`maxItems`	`number`		Collapse the middle into an ellipsis menu when there are more items (minimum 2).
`ellipsisLabel`	`(hiddenCount: number) => string`	`defaultEllipsisLabel`	Accessible name of the ellipsis button; receives the number of hidden items.

Breadcrumbs.Item (BreadcrumbsItem)

App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode