Wizcamp

Breadcrumb Component Test

Testing breadcrumb navigation with various patterns

Basic Breadcrumb

With Next.js Link (asChild)

With Custom Separator

With Icon in Link

Default (items-center):

With -mb-0.5 on icon (optical adjustment):

With items-baseline (text baseline alignment):

With Ellipsis (Collapsed)

Long Path Example

Custom Styling

Implementation Notes

  • ✅ Tabler icons (IconChevronRight, IconDots) instead of Radix
  • ✅ Semicolons for consistency
  • ✅ Shadcn's text-muted-foreground for links (better than Relume's text-text-primary)
  • ✅ Shadcn's hover:text-foreground transition (better UX)
  • ✅ Shadcn's font-normal for current page (clearer hierarchy)
  • ✅ asChild support for Next.js Link integration
  • ✅ Custom separator support
  • ✅ Ellipsis component for collapsed paths
  • ✅ Responsive gap sizing (gap-1.5 sm:gap-2.5)
  • 💡 Optical alignment options: -mb-0.5 on icon, or items-baseline for text baseline