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

[Bug]: Breadcrumb variant without background #573

Open
3 tasks done
gselderslaghs opened this issue Dec 30, 2024 · 2 comments
Open
3 tasks done

[Bug]: Breadcrumb variant without background #573

gselderslaghs opened this issue Dec 30, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@gselderslaghs
Copy link
Member

Before submitting...

Context

I'd like to implement a breadcrumb variant into my page in the same background and text color as my page content, currently a background color is attached since it's rendered inside a nav tag, which contains the background color for the main navigation as wel
When I remove the background color by removing the nav tag, the icons between the breadcrumbs are not positioned wel``

Current Behavior

When implementing breadcrumb as documented, a background color is rendered because of the nav tag

Expected behavior

Breadcrumbs should be more flexible, they should be implementable with or without a background inside a nav tag, in a standard setup, as basic as possible

Possible Solutions or Causes

Remove background styling from the nav tag directly and work explicitly with css selectors for navigation and other components sharing the nav tag
Implementing the breadcrumb without a nav results in incorrect semantic of the html and should be considered an invalid approach
This can only be fixed with css optimizations

Steps to reproduce

I have setup a simple page in this Codepen Example
As you notice the breadcrumb is rendered in a nav tag, the nav tag has always has a background color applied
Removing the nav tag results in alignment issues with the carrot icons and the current link not being visible
Screenshot 2024-12-30 at 17 28 50

Your Environment

  • Version used: v2.2.1
@gselderslaghs gselderslaghs added the bug Something isn't working label Dec 30, 2024
@gselderslaghs
Copy link
Member Author

I've been working on this lately and created a Codepen example with backwards compatibility
For this example I needed to change the classes because of Materialize styling import overrides, if the idea get approved, we can implement it with the original classes

WDYT?

@wuda-io
Copy link
Member

wuda-io commented Jan 5, 2025

Looks really nice. The color difference in the second example could be a bit more, but otherwise good work 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants