Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.

If the last breadcrumb is not the current page, then that link must have a valid href.

Anchor tags can be replaced with buttons if the hierarchy is not intended to be deep linkable. This is a rare & unlikely scenario - therefore please exercise caution!

Long Breadcrumbs with Overflows

Long breadcrumbs can arise due to any combination of small screen sizes, large category names and language translations. In these situations the breadcrumbs will need to get an overflow treatment in the second node with an overflow button and menu items.

If there are 4 or more nodes for breadcrumbs, an overflow on node 2 should be used instead of various additional nodes between that node and the final one. The list of items in the overflow menu should include content from node 2 until last node minus 2 nodes so that there are always 4 nodes on screen including the overflow button node. You cannot show more than 3 breadcrumbs + overflow, or 4 breadcrumbs. The minimum amount to show is 1 leading item, overflow, and the current page you are on.

Additionally, to account for smaller screens, there is a maximum width limit on each node label. Please check the CSS for details (not specified here intentionally to avoid doc/code misalignment).