Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/breadcrumb.

When to use it

Use Breadcrumb when the page sits inside a catalog or content hierarchy and visitors need a visible trail back to parent levels. It is standard on product detail pages, category listings, account sub-pages, and any view deeper than two levels.

If the page structure is flat (homepage, landing pages, single-level settings), breadcrumbs add noise without value.

Slot strategy

Breadcrumb is a list-based composition:

• Breadcrumb is the root `` element with an aria-label for screen readers.
• BreadcrumbList is the ordered list (``) that holds the items.
• BreadcrumbItem wraps each segment in the trail.
• BreadcrumbLink is a clickable ancestor link. Use standard href for navigation.
• BreadcrumbPage marks the current page. It renders as plain text with aria-current="page" instead of a link.
• BreadcrumbSeparator renders a visual divider between items (defaults to a slash or chevron icon).
• BreadcrumbEllipsis collapses middle segments into a "..." indicator for deep paths.

Separators are explicit

Unlike some breadcrumb libraries, separators are not injected automatically. Place a BreadcrumbSeparator between each pair of items so you have full control over which segments are visible.

Behavior and theming guidance

The component renders semantic HTML (nav > ol > li) with proper ARIA attributes, so screen readers announce it as a navigation landmark. Keep the trail short: show the root, one or two relevant ancestors, and the current page. Use BreadcrumbEllipsis when the full path would exceed four or five visible segments.

Links use muted foreground colors by default and the current page uses the regular foreground color, which creates a natural visual hierarchy without extra styling. The separator inherits the muted color to stay unobtrusive.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Breadcrumb.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes