Breadcrumb

Navigation aid that shows the user's current location within a hierarchy. Each item can be a link, a button, or plain text (current page).

Playground

size

separator

<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Settings', href: '/settings' },
  { label: 'Profile' },
]}/>

Pass an items array. The last item is automatically treated as the current page.

Three size presets: sm, md (default), lg.

Pass any ReactNode as the separator prop.

Use onClick instead of href for client-side navigation or custom handlers.

Works with any number of items.

API: BreadcrumbProps

Property	Type	Default	Description
`items`	`BreadcrumbItem[]`		Array of breadcrumb items. The last item is the current page (non-link)
`separator`	`ReactNode`	"/"	Custom separator rendered between items
`size`	`"sm" \| "md" \| "lg"`	"md"	Font size preset
`className`	`string`		Extra class applied to the <ol> element

Property	Type	Description
`label`	`ReactNode`	Text or node to display
`href`	`string`	If provided, renders the item as an <a> tag
`onClick`	`(e: MouseEvent) => void`	If provided (and no href), renders the item as a <button>