The Problem
If you want breadcrumb navigation on your MODX website, it's as easy as installing the Breadcrumbs snippet and calling it in your template, like this:
[[Breadcrumbs]]
The problem is, in MODX Revolution, the default output is an unordered list separated by a double-arrow: »
If you want a horizontal output, vs a vertical list, you'd select the list items in your CSS - but the double-arrows don't behave because they're not wrapped in any containers.
The Solution(s)
I think there's a CSS selector that will select the double-arrows despite the fact that they're not wrapped. If not, there's definitely one in jQuery. But those aren't the methods I've chosen, because in MODX I can easily customize the output of anything :P
The Snippet Call
[[Breadcrumbs? &crumbSeparator=`<li>»</li>`]]
Break It Down:
The &crumbSeparator property allows you to customize the output of the double-arrows. Here I've wrapped them in list item tags, so they behave just like the navigation elements. Float all list items and voila - horizontal breadcrumbs! So simple...
