Navigation Breadcrumbs
This simple breadcrumb component uses a trick to fake auto-widths on the buttons, enabling to create navigation breadcrumbs without needing to use a PCF component. Magic!
- galBreadcrumbs:
Control: Gallery@2.15.0
Variant: Horizontal
Properties:
BorderColor: =RGBA(245, 245, 245, 1)
Items: |-
=Table(
{ index: 0, width: 80, name: "Home" },
{ index: 1, width: 112, name: "About us" },
{ index: 2, width: 160, name: "Something else" },
{ index: 3, width: 56, name: "This" }
)
TemplateSize: =16
Children:
- btnBreadcrumbLink:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
FontSize: =19
OnSelect: =Notify("this is " & ThisItem.name)
Text: =ThisItem.name
Width: =ThisItem.width
X: =0 + Sum(Filter(nfItems, index < ThisItem.index), width)
- icoArrow:
Control: Icon@0.0.7
Properties:
Height: =24
Icon: ="ChevronRight"
IconColor: =RGBA(215, 58, 60, 1)
IconStyle: ='Icon.IconStyle'.Filled
Visible: =Last(nfItems).index <> ThisItem.index
Width: =24
X: =btnBreadcrumbLink.X + ThisItem.width
Y: =4
Loading syntax highlighting...