Hi B4Xers!
I’m excited to share B4XDaisyBreadcrumbs, a new cross-platform component designed to bring the modern, clean aesthetic of DaisyUI's breadcrumb system to the B4X ecosystem. Whether you're building a complex file explorer or a multi-step wizard, this component provides a responsive way for users to track their location with ease. The breadcrumb rests inside a horizontal scrollview so that if items are longer one can scroll them.
Key Features:
Check out the demo to see it in action across all platforms!
Related Content
I’m excited to share B4XDaisyBreadcrumbs, a new cross-platform component designed to bring the modern, clean aesthetic of DaisyUI's breadcrumb system to the B4X ecosystem. Whether you're building a complex file explorer or a multi-step wizard, this component provides a responsive way for users to track their location with ease. The breadcrumb rests inside a horizontal scrollview so that if items are longer one can scroll them.
Key Features:
- Text Size Variants: Choose from text-sm, text-base, text-lg, and text-xl tokens. The component automatically scales labels, SVG icons, and separators to maintain perfect proportions .
- SVG Icon Support: Each breadcrumb can include a Daisy-style icon for enhanced visual cues while maintaining perfect horizontal flow .
- Smart Scrolling: No more layout breaks! If your breadcrumb path exceeds the container width, the component enables smooth horizontal scrolling automatically .
- Theme Awareness: Fully compatible with theme-aware color tokens and can be refreshed on the fly to match your app’s look .
- Interactive Design: Earlier crumbs are clickable for easy backtracking, while the final crumb remains passive to indicate the current location .
B4X:
' Example: Initializing and adding items programmatically
Sub CreateBreadcrumbs
' Initialize the component
Dim bc As B4XDaisyBreadcrumbs
bc.Initialize(Me, "crumbs")
' Add to parent (works in Designer too!)
bc.AddToParent(Root, 10dip, 10dip, Root.Width - 20dip, 50dip)
' Add items: (Id, Text, IconPath, Clickable)
' Earlier crumbs are typically clickable; the last one is not.
bc.AddItem("home", "Home", "home-icon.svg", True)
bc.AddItem("docs", "Documents", "folder-icon.svg", True)
bc.AddItem("current", "Add Document", "", False)
' Customize text size (sm, base, lg, xl)
bc.TextSize = "text-sm"
bc.Refresh
End Sub
' Handle item clicks
Sub crumbs_ItemClick (ItemId As String)
Log("Breadcrumb clicked: " & ItemId)
' Navigation logic here...
End SubCheck out the demo to see it in action across all platforms!
Related Content
[B4X] [B4A] B4XDaisy UI Kit - Native Components inspired by DaisyUI & Tailwind
Hi Fam Disclaimer: The [B4A] in the title? This b4xlib has only been tested with B4A, thus the title. I have not checked the cross-platform functionality as its on the roadmap when I finish the complete library. The b4xlib is still in ALPHA stage, things might change, apis might break and...