Breadcrumb

Navigation trail showing the current page location. Collapses middle items with an ellipsis when maxItems is set.

import{ Breadcrumb } from "@pepulux/ui"

Default

With divider options

Props

PropTypeDefaultDescription
items*BreadcrumbItem[]—Array of { label, href? } — last item is the current page
divider"chevron" | "slash""slash"Divider style between segments
buttonStylebooleanfalseRender non-active items as pill buttons
withLinebooleanfalseShows horizontal border above and below
classNamestring—Additional CSS classes
Application component → Breadcrumbswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Show where you are in the hierarchy

Breadcrumbs help people understand depth and move back up. Show the path from the root to the current page, with the current page last and not linked.

On small screens, collapse the middle items with an ellipsis.