How to customize the breadcrumb

[udayvunnam]

How to customize the breadcrumb

[Hesesses]

Thank you very much! 🙏

[udayvunnam]

Hi @Hesesses, Thanks for opening this issue.

You can use custom separator as well as override styles.

Custom separator:
Breadcrumb by default uses '/' as the separator. To use custom separator pass it as input to the component like below.

<xng-breadcrumb seperator=">"></xng-breadcrumb>

Styling breadcrumbs:
The library uses the least specific selectors possible in order to make it easy to override them.
you can override by changing the CSS for classes .breadcrumb, .current-path, .separator etc with ::ng-deep

::ng-deep .breadcrumb {
  background-color: bisque;
  border: 1px solid;
}

please upgrade the library to latest release npm i xng-breadcrumb@latest --save to use these features

[udayvunnam]

Do let me know if you feel a feature is missing or not evident. Happy to help!

[Hesesses]

I will! I actually tried 3 or 4 different plugins and this seems to be absolutely the best one.