Update Breadcrumb icons

[itsyme]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:
Added a ">>" before the start of breadcrumbs and changed the icons between links of breadcrumbs to ">" to increase clarity.

Anything you'd like to highlight/discuss:

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)
Update Breadcrumb icons

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[yucheng11122017]

Hi @itsyme, understand that @damithc prefers this implementation but I actually thought that using slash is better for breadcrumbs. Other sites also use slash and would be good to be consistent with them.
The slash also looks nicer imo

[damithc]

@yucheng11122017 Using the slash is fine if there is no confusion when there is a slash in the text itself. Perhaps the slash can be formatted differently from the text?

Also dig around resources such as this to see if there are relevant ideas https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/

[yucheng11122017]

@yucheng11122017 Using the slash is fine if there is no confusion when there is a slash in the text itself. Perhaps the slash can be formatted differently from the text?

Also dig around resources such as this to see if there are relevant ideas https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/

Oh I see your concern Prof. I found some icons which I think may work and imo looks nicer than the current fix

Glyphicons menu right
Octicon File ref

Not sure if this is useful @itsyme

[itsyme]

Thank you for the feedback @damithc @yucheng11122017! What do you think about the below? I feel that it makes the square brackets make the breadcrumb look less like stray text when there is only one item and the pipe would help reduce the confusion between text and the breadcrumb separator as pipe would be much less common in titles.

[damithc]

I fear both | and ] do not go well with the sense of hierarchy/navigation we are trying to convey. They look like choice between equals rather than a hierarchy :-(

[lhw-1]

Some possible ideas for the design as well, most of them seem to use arrows or backslash (or some variations of those), I've also seen - being used:

https://mui.com/material-ui/react-breadcrumbs/
https://mui.com/joy-ui/react-breadcrumbs/
https://component.gallery/components/breadcrumbs/

Personally, I think arrows (Glyphicons menu right as suggested by @yucheng11122017) or emboldened backslash might work well with the square brackets?

Alternatively, we can have the backslash as a default and provide an option to use a custom separator like this, would that be a possibility @damithc? Since having backslash in the heading might be a specific rather than a general use case.

[yucheng11122017]

Thanks for changing the styling @itsyme! I think it looks a lot better than the initial cos its actually aligned with the words :)

Maybe in a following PR we can allow users to change the separator as @lhw-1 suggested but for now this is great

[yucheng11122017]

LGTM!

[damithc]

Yup, looking better. But let's try to use suitable icons in this PR itself. >> abc still can give the impression of a typo or stray text.

[itsyme]

Hi @damithc! I was wondering if the latest icons for breadcrumbs are to your liking?

[damithc]

Hi @damithc! I was wondering if the latest icons for breadcrumbs are to your liking?

@itsyme Yup, looks good 👍