Breadcrumb: Items cannot be modified

[mikewheaton]

From @dmitriyyepishin on April 9, 2016 1:24

If items are added to a Breadcrumb after initial creation, it is not possible to recreate the component to redistribute the items between the main list of items and overflow list.

Also, only one breadcrumb can be created on a page.

Here's a demo of both problems: https://codepen.io/dyepishin/pen/JXMxgz

Copied from original issue: OfficeDev/office-ui-fabric-core#485

[mikewheaton]

From @wdo3650 on April 11, 2016 5:40

@dmitriyyepishin Thanks for pointing out these bugs. We'll take a look.

[mikewheaton]

From @dmitriyyepishin on April 13, 2016 1:43

Here's a fix that seems to work: https://codepen.io/dyepishin/pen/WwzbwK/?editors=1010

[mikewheaton]

From @wdo3650 on April 13, 2016 2:1

@dmitriyyepishin Thanks for offering up a fix. We have a fix in PR currently, #487 .

The scope of objects running in the prototype needed to be refactored. Also, three new methods have been added which allow the Breadcrumb to be updated on the fly.

• addItem(itemLabel, itemLink, tabIndex)
• removeItemByLabel(itemLabel)
• removeItemByPosition(position)

You can see the demo of it here: http://codepen.io/anon/pen/qZoWap

[mikewheaton]

From @dmitriyyepishin on April 14, 2016 23:16

Nice. Thank you.

[mikewheaton]

From @dmitriyyepishin on May 19, 2016 23:43

There are couple issues in the new code:

• If no link is specified when using addItem(), then href is set to “undefined”
• Code comment in removeItemByPosition is incorrect

I also would like to suggest the following additions to the Breadcrumb component, which I used in my app:

• New public method clear, which removes all items from the breadcrumb
• New public method removeItemsAfterPosition, which removes all breadcrumb items after a specified position (this seems to be something often needed)
• Add new style js-auto-remove to breadcrumb div, which, if specified, indicates that when an breadcrumb item is clicked, all items after it should be removed.

Here's a demo: https://codepen.io/dyepishin/pen/LNJXBO

[wdo3650]

@dmitriyyepishin thanks for letting us know about the issues. #188 should address the comment issue. The conversion to Typescript probably caught the undefined bug you reported in the href as I am not able to reproduce it.

The addition of the clear and removeItemsAfterPostion are super handy. Although we don't currently have those methods as a part of our roadmap, we're always looking for members of the community to contribute to the project. If you were interesting, we'd love to see a PR with your enhancements.

[Linda-Editor]

Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend that you use the newer version, Office UI Fabric, with React as your front-end framework. We are closing this issue; if you still need assistance with Fabric.js, visit Stack Overflow/office-ui-fabric.