New component: Breadcrumb

[benjamincharity]

trafficstars

TODO

---

Breadcrumbs show users the current location within a hierarchy. This can be helpful at a site level to show the user's current location. It can also be leveraged to show the user's location within a more targeted section such as a Country Selector, Wizard, etc.

Open Questions - TODO

• How should we handle overflow when the items exceed the available space?
  • Truncate part of the breakcrumb trail? Beginning? Middle?
• What typography styles should be used?
  • Should it inherit styles? Caption styles? Default typography?

Requirements

• [ ] Should support icons and/or text within an item
• [ ] Each breadcrumb should support a link OR a button that fires an emitter
  • Supporting more than just router links allows us to leverage this component in items like the proposed country selector.
• [ ] Should be constructed using a <nav> element containing an ordered list (<ol>)
  • [ ] The containing nav element should have aria-label="Breadcrumb"
• [ ] The last item in the list should have the attribute aria-current="page"
• [ ] The last item in the list should be plain text (not a link)
• [ ] The last item should not have a trailing separator
• [ ] Separators should be added via CSS so screen readers do not see them
  • [ ] Separators should be forward slashes: /

Possible usage

<ts-breadcrumb>
  <ts-link [destination]="['my', 'path']">First</ts-link>
</ts-breadcrumb>