Skip to main content

​
Overview

HuxBreadcrumbs displays the navigation trail for the current page. It adapts to light/dark themes and supports icons, sizes, and overflow.

​
Basic Usage

HuxBreadcrumbs(
  items: [
    HuxBreadcrumbItem(
      label: 'Home',
      icon: LucideIcons.home,
      onTap: () => context.showHuxSnackbar(
        message: 'Home',
        variant: HuxSnackbarVariant.info,
      ),
    ),
    HuxBreadcrumbItem(label: 'Products', onTap: () {}),
    HuxBreadcrumbItem(label: 'Smartphones', onTap: () {}),
    HuxBreadcrumbItem(label: 'iPhone 15 Pro', onTap: () {}, isActive: true),
  ],
)

​
Variants

HuxBreadcrumbVariant controls the separator style:

​
Default

Uses the / text separator. 
HuxBreadcrumbs(
  variant: HuxBreadcrumbVariant.default_,
  items: [...],
)

​
Icon

Uses a chevron icon separator. 
HuxBreadcrumbs(
  variant: HuxBreadcrumbVariant.icon,
  items: [...],
)

​
Sizes

Control spacing and typography with HuxBreadcrumbSize: 
HuxBreadcrumbs(size: HuxBreadcrumbSize.small, items: [...])
HuxBreadcrumbs(size: HuxBreadcrumbSize.medium, items: [...]) // default
HuxBreadcrumbs(size: HuxBreadcrumbSize.large, items: [...])

​
Overflow

Collapse long paths with an overflow token. 
HuxBreadcrumbs(
  maxItems: 3,
  overflowIndicator: Text('...'),
  items: [...],
)

​
API Reference

​
HuxBreadcrumbs Properties

PropertyTypeDefaultDescription
itemsList<HuxBreadcrumbItem>—Breadcrumbs to render
variantHuxBreadcrumbVariantdefault_Visual style
sizeHuxBreadcrumbSizemediumSpacing and typography
maxItemsint?nullCollapse middle items when exceeded
overflowIndicatorWidget?nullCustom widget for overflow token

​
HuxBreadcrumbItem

PropertyTypeDefaultDescription
labelString—Text label
onTapVoidCallback—Called when item is tapped
iconIconData?nullOptional leading icon
isDisabledboolfalseNon-interactive appearance
isActiveboolfalseMarks the current page

​
Accessibility

  • Items are accessible via semantics and keyboard focus
  • Active item is visually distinguished; disabled items announce properly
⌘I