StylishBreadcrumb

fun StylishBreadcrumb(items: List<StylishBreadcrumbItem>, modifier: Modifier = Modifier, separator: @Composable () -> Unit = { Icon( Icons.Default.KeyboardArrowRight, contentDescription = null, modifier = Modifier.size(18.dp), tint = MaterialTheme.colorScheme.onSurfaceVariant, ) }, maxItems: Int = Int.MAX_VALUE, textStyle: TextStyle = MaterialTheme.typography.bodyMedium, color: Color = MaterialTheme.colorScheme.onSurfaceVariant, activeColor: Color = MaterialTheme.colorScheme.onSurface)

A navigation trail showing the current location in a hierarchy — the web "Breadcrumb" pattern from shadcn/ui, MUI, and Ant Design.

Items are rendered left to right separated by separator. The last item is rendered as static text in activeColor; earlier items are clickable links. When maxItems is smaller than the item count, the middle of the trail is collapsed into an ellipsis.

Parameters

items

The breadcrumb trail, from root to current page.

modifier

Modifier applied to the root row.

separator

Visual separator between items. Defaults to a small right-arrow icon.

maxItems

Maximum number of items to show before collapsing with an ellipsis. Defaults to Int.MAX_VALUE (never collapse).

textStyle

Typography of the labels. Defaults to MaterialTheme.typography.bodyMedium.

color

Color of navigable (non-current) items. Defaults to MaterialTheme.colorScheme.onSurfaceVariant.

activeColor

Color of the current (last) item. Defaults to MaterialTheme.colorScheme.onSurface.