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