Breadcrumb

A navigation hierarchy indicator that shows the user's current location within the site.

Overview

Breadcrumb renders an ordered list of navigation links separated by a configurable separator. It marks the current page as the last item and wraps the list in a <nav> element for accessibility.

Pass anchor elements (<a>) for navigable ancestors and a <span> for the current page.
The last child is automatically styled as the active page and receives no separator after it.
Override the separator via the separator prop — use a string (e.g., "/") or any ReactNode.

Accessibility

The wrapping <nav> element has aria-label="Breadcrumb" so screen readers identify the landmark.
Separators are hidden from assistive technologies via aria-hidden="true".
Mark the current page with aria-current="page" on the last item for screen reader users.

Import

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

Default

Basic breadcrumb with the default chevron separator.

Size

Three sizes are available: sm, md, and lg. The default is md.

API Reference

Breadcrumb

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the font size of the breadcrumb items.
`separator`	`ReactNode`	`<ChevronRightIcon />`	The separator element rendered between each breadcrumb item. Pass a string or any React element.
`children*`	`ReactNode`	-	The breadcrumb items. Pass anchor elements for navigable ancestors and a span for the current page.