Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to customize the breadcrumb #5

Closed
Hesesses opened this issue Jul 17, 2019 · 4 comments
Closed

How to customize the breadcrumb #5

Hesesses opened this issue Jul 17, 2019 · 4 comments

Comments

@Hesesses
Copy link

Hello,

thank you very much for this plugin.

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

@udayvunnam
Copy link
Owner

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 udayvunnam pinned this issue Jul 17, 2019
@Hesesses
Copy link
Author

Thank you very much! 🙏

@udayvunnam
Copy link
Owner

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

@Hesesses
Copy link
Author

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

@udayvunnam udayvunnam unpinned this issue Nov 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants