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!

December 7, 2025
</> YAML
- 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...

Delete Snip

Are you sure you want to delete this snip? This action cannot be undone.