Breadcrumb

A basic breadcrumb navigation using BreadcrumbLink for clickable ancestor pages and BreadcrumbPage for the current page. The current page is rendered as non-clickable text with aria-current="page" to convey the user's position to screen readers.

Set AutoSeparator on BreadcrumbList to automatically insert separators between each BreadcrumbItem, eliminating the need for manual BreadcrumbSeparator elements. Optionally provide custom separator content via SeparatorContent.

Use BreadcrumbEllipsis to collapse intermediate items in deeply nested navigation paths. This keeps the breadcrumb compact while still showing the root and current page. The ellipsis is marked with aria-hidden="true" and includes a screen-reader-only "More" label.

Pass custom content to BreadcrumbSeparator to replace the default chevron-right icon with a different character or icon. The separator is rendered as a list item with role="presentation" and aria-hidden="true", ensuring it is purely decorative and invisible to assistive technology.

Use the Class parameter on each sub-component to create fully custom breadcrumb styles. Apply gradients, custom colors, or themed backgrounds to match your application's design system. Here the breadcrumb links use a colored hover effect and the current page uses a gradient text style.

Include icon components inside BreadcrumbLink alongside text for added visual context. Icons like house and folder help users quickly identify the breadcrumb meaning without reading the label. This pattern is especially useful for file manager or folder-based navigation hierarchies.

A real-world pattern where breadcrumbs are generated dynamically from a list of path segments. This is useful when building breadcrumbs from route data or a content hierarchy. The last item is automatically rendered as BreadcrumbPage while preceding items are rendered as BreadcrumbLink with clickable hrefs.