search

udayvunnam / xng-breadcrumb

A lightweight, configurable and reactive breadcrumbs for Angular 2+
https://udayvunnam.github.io/xng-breadcrumb
MIT License
242 stars 62 forks source link

How to customize the breadcrumb #5

Closed Hesesses closed 5 years ago

Hesesses commented 5 years ago

Hello,

thank you very much for this plugin.

I was wondering how you can customize the look of the breadcrumb, css? separator?

udayvunnam commented 5 years ago

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

Hesesses commented 5 years ago

Thank you very much! 🙏

udayvunnam commented 5 years ago

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

Hesesses commented 5 years ago

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