BreadcrumbItem only works if href property is provided

If you want to actually use the BreadcrumbItem then you need to provide an href property on each item. Without the href the BreadcrumbItem causes an error. You can render your own anchor tag as a child of the BreadcrumbItem but the link is rendered as if it’s disabled. This does not work well for those who want to use react-router for client routing, and have a BreadcrumbItem with only an onClick and no href. Setting href to javascript:void(0) might work in the short-term but when react starts disallowing javascript URLs this will not be an option. So there are probably two issues involved: the bx--link renders as disabled if the href property is missing, and the BreadcrumbItem requires an href or it breaks.

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Unable to create a usable BreadcrumbItem (or any link at all really) without an href property.

Is this issue related to a specific component?

BreadcrumbItem (and probably Link)

What did you expect to happen? What happened instead? What would you like to see changed?

I think the BreadcrumbItem should allow either an href or an onClick (or both), and the link should not be disabled if either is provided.

What browser are you working in?

Latest chrome

What version of the Carbon Design System are you using?

v10

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Cloud Kubernetes Service

We are currently working around the issue by not using the BreadcrumbItem, and instead using our own anchor tag without the bx--link class applied to it, in addition to styling fixes so the link appears the way it should.

Steps to reproduce the issue

Create a BreadcrumbItem or Link without an href property. It will either cause an error or will be disabled. See CodeSandbox example linked below.

https://codesandbox.io/s/codesandbox-gmf7d

[jendowns]

Thanks @jrpomeroy – So this is definitely something… that inner Button component (and <button> element) should NOT render with :disabled styles in this situation, as it is still interactive.

It looks like BreadcrumbItem adds .bx--link class no matter what, which beats out the ghost Button styling & applies a specific :not(...) rule 🤔

Note that I’m not 100% sure if it’s just specificity and/or the import order of link and button styles, but either way the button styles are getting beaten. 😲

Anyway… this isn’t how active/interactive ghost buttons are meant to be styled. And you can imitate this style specificity bug in storybook too if you inspect the first button & add .bx--link to it: http://react.carbondesignsystem.com/?path=/story/buttons--default 👀

I just opened a quick PR for this here: https://github.com/carbon-design-system/carbon/pull/4709

---

Assuming the carbon stance remains that all anchor tags must have an href value in order to be valid, what is the path going forward when react disallows setting href to javascript:void(0)?

@dakahn I was wondering if you have an official answer for this (https://github.com/carbon-design-system/carbon/issues/4705#issuecomment-555169093), or know who does?☝️

[arloduff]

I would add that not everyone necessarily wants every breadcrumb to link somewhere. There are plenty of valid use cases for having some breadcrumbs contain links, but not all of them. I would like to see the href property be optional.