Platform: Breadcrumb Component Technical Design

Breadcrumb

Summary

The Breadcrumb component is a navigational element. It reveals the hierarchical nature of an application and allows the user to navigate up the hierarchical trail.

Example

<fdp-breadcrumb separator=">">
    <fdp-breadcrumb-item [id]="'animalsId'" [href]="'/animals'">Animals</fdp-breadcrumb-item>
    <fdp-breadcrumb-item [id]="'catsId'" [href]="'/animals/cats'">Cats</fdp-breadcrumb-item>
    <fdp-breadcrumb-item [id]="'tigersId'" [href]="'/animals/cats/tigers'">Tigers</fdp-breadcrumb-item>
    <fdp-breadcrumb-item [id]="'tiggerId'">Tigger</fdp-breadcrumb-item>
</fdp-breadcrumb>

Breadcrumb Component

The Breadcrumb component is a container which manages its child BreadcrumbItems. It needs to be aware of the amount of horizontal space it occupies, and the sum of the widths of its child items. If the sum of the widths of its child items exceed the available horizontal space, it needs to create an "overflow" menu, starting from the beginning of the breadcrumb path - i.e. the current or last element of the breadcrumb must always be visible.

Property Bindings

separator: string

The separator character which separates on breadcrumb item from the next.

BredcrumbItem Component

Property Bindings

id: string

The ID of the breadcrumb item.

href: string

The hyperlink reference of the breadcrumb item. Clicking on the breadcrumb item will direct the user to the URL of the 'href'. If no 'href' is specified, then the breadcrumb item will not be a link - this is used if the user wants to display the "current" item. Wiki:

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-breadcrumb-item can be supported as:

<fdp-breadcrumb-item i18n="@@cats" [id]="'catsId'" [href]="'/animals/cats'">Cats</fdp-breadcrumb-item>

Redesign Required: No

fdp-breadcrumb handles action items and overflow declaratively, so no changes are needed.

---

Notes

• The Breadcrumb component will need to keep track of its children, and be able to calculate the sum of the child widths and spacing.
• The Breadcrumb will need to be able to track any changes to its own width and compare against sum of child widths, in case it needs to condense its breadcrumb items into a "overflow" menu.

Notes

@Manju/Sushma:

1. Breadcurmb can take following types of separators: Slash Backslash Double slash Double backslash Greater than Double greater than

I've added a separator property binding which will allow the user to set the separator character.