ArcaneJaspr Codex
Documentation
🔍
ArcaneBreadcrumbs
Navigation breadcrumb trail
Live Demo

ArcaneBreadcrumbs#

A breadcrumb navigation component showing the current page's location within a hierarchical structure.

Basic Usage#

ArcaneBreadcrumbs(
  items: [
    BreadcrumbItem(label: 'Home', href: '/'),
    BreadcrumbItem(label: 'Products', href: '/products'),
    BreadcrumbItem(label: 'Category'),
  ],
)

Properties#

PropertyTypeDefaultDescription
items List<BreadcrumbItem> required Breadcrumb items
separator BreadcrumbSeparator chevron Separator style
size BreadcrumbSize md Size variant
showHome bool false Show home icon
maxItems int? null Max visible items
PropertyTypeDescription
labelStringDisplay text
hrefString?Link URL (null for current page)
iconComponent?Optional icon

Separators#

// Chevron (default)
ArcaneBreadcrumbs(
  items: items,
  separator: BreadcrumbSeparator.chevron,
)

// Slash
ArcaneBreadcrumbs(
  items: items,
  separator: BreadcrumbSeparator.slash,
)

// Arrow
ArcaneBreadcrumbs(
  items: items,
  separator: BreadcrumbSeparator.arrow,
)

// Dot
ArcaneBreadcrumbs(
  items: items,
  separator: BreadcrumbSeparator.dot,
)

Sizes#

// Small
ArcaneBreadcrumbs(
  items: items,
  size: BreadcrumbSize.sm,
)

// Medium (default)
ArcaneBreadcrumbs(
  items: items,
  size: BreadcrumbSize.md,
)

// Large
ArcaneBreadcrumbs(
  items: items,
  size: BreadcrumbSize.lg,
)

With Home Icon#

ArcaneBreadcrumbs(
  items: items,
  showHome: true,
)

With Icons#

ArcaneBreadcrumbs(
  items: [
    BreadcrumbItem(
      label: 'Dashboard',
      href: '/dashboard',
      icon: ArcaneIcon.home(),
    ),
    BreadcrumbItem(
      label: 'Settings',
      href: '/dashboard/settings',
      icon: ArcaneIcon.settings(),
    ),
    BreadcrumbItem(label: 'Profile'),
  ],
)

Truncation#

// Show max 4 items with ellipsis
ArcaneBreadcrumbs(
  items: longPath,
  maxItems: 4,
)

Examples#

E-commerce Navigation# 

ArcaneBreadcrumbs(
  items: [
    BreadcrumbItem(label: 'Home', href: '/'),
    BreadcrumbItem(label: 'Electronics', href: '/electronics'),
    BreadcrumbItem(label: 'Phones', href: '/electronics/phones'),
    BreadcrumbItem(label: 'iPhone 15 Pro'),
  ],
  separator: BreadcrumbSeparator.chevron,
)

Documentation Path# 

ArcaneBreadcrumbs(
  items: [
    BreadcrumbItem(label: 'Docs', href: '/docs'),
    BreadcrumbItem(label: 'Components', href: '/docs/components'),
    BreadcrumbItem(label: 'Navigation', href: '/docs/components/navigation'),
    BreadcrumbItem(label: 'Breadcrumbs'),
  ],
  showHome: true,
)