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>
    <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.

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.