Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Styled byLS Breadcrumb
Use an ordered or unordered list with linked list items to create a minimally styled Breadcrumb. Use our utilities to add additional styles as desired.
<Breadcrumb [Root]="Root"></Breadcrumb>
<Breadcrumb [Root]="Root" [Items]="Items"></Breadcrumb>
Dividers can be changed by modifying the [Letter] prop.
<Breadcrumb [Root]="Root" [Items]="Items" [Letter]="'>'"></Breadcrumb>
<Breadcrumb [Root]="Root" [Items]="Items" [Letter]="'~'"></Breadcrumb>
Root = {FaIcon: 'fa-solid fa-house-chimney', Href: '/'} as BreadcrumbItem;
Items = [
{Label: 'Avatar', Href: '/LootstrapNg'},
{Label: 'Google', Href: 'https://www.google.com', External: true, FaIcon: 'fa-solid fa-arrow-up-right-from-square'},
{Label: 'Breadcrumb'},
] as BreadcrumbItem[];
You can also remove the divider setting [Letter]="' '".
<Breadcrumb [Root]="Root" [Items]="Items" [Letter]="' '"></Breadcrumb>
It’s also possible to use an embedded SVG icon:
<Breadcrumb [Root]="Root" [Items]="Items"
style="--ls-breadcrumb-divider: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxwYXRoIGQ9J00yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eicgZmlsbD0nY3VycmVudENvbG9yJy8+PC9zdmc+');"></Breadcrumb>
With border, shadow and thicker padding breadcrumb version. Use [Chevron] prop, followed by one of the contextual type Regular, Larger or Vertical to use this style.
<Breadcrumb [Root]="Root" [Items]="Items" [Chevron]="'Regular'"></Breadcrumb>
<Breadcrumb [Root]="Root" [Items]="Items" [Chevron]="'Larger'"></Breadcrumb>
<Breadcrumb [Root]="Root" [Items]="Items" [Chevron]="'Vertical'"></Breadcrumb>
Can automatically retrieve custom data from current route (data['breadcrumb']).
<Breadcrumb [Autoload]="true"></Breadcrumb>
<Breadcrumb [Root]="Root" [Autoload]="true" [Chevron]="'Larger'"></Breadcrumb>
// AppRoutingModule
const routes: Routes = [
{
path: 'LootstrapNg', component: LayoutComponent,
loadChildren: () => import('./Modules/LootStrapNg/loot-strap-ng.module').then(mod => mod.LootStrapNgModule)
},
...
];
// LootStrapNgRoutingModule
const routes: Routes = [
{path: '', redirectTo: 'Avatar'},
{
path: '',
children: [
{
path: '', data: {breadcrumb: 'LootstrapNg'}, component: LootstrapNgMainComponent, children: [
{path: 'Avatar', data: {breadcrumb: 'Avatar'}, component: NgAvatarComponent},
{path: 'Breadcrumb', data: {breadcrumb: 'Breadcrumb'}, component: NgBreadcrumbComponent},
{path: 'Card', data: {breadcrumb: 'Card'}, component: NgCardComponent},
{path: 'Carousel', data: {breadcrumb: 'Carousel'}, component: NgCarouselComponent},
{path: 'Pagination', data: {breadcrumb: 'Pagination'}, component: NgPaginationComponent},
{path: 'Rating', data: {breadcrumb: 'Rating'}, component: NgRatingComponent},
{path: 'Tabs', data: {breadcrumb: 'Tabs'}, component: NgTabsComponent},
{path: 'Time', data: {breadcrumb: 'Time'}, component: NgTimeComponent},
{path: 'Timeline', data: {breadcrumb: 'Timeline'}, component: NgTimelineComponent},
]
}
]
}];