Run the CLI
Use the CLI to add the component to your project.
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { Component } from '@angular/core';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardBreadcrumbModule } from '../breadcrumb.module';
@Component({
selector: 'z-demo-breadcrumb-default',
standalone: true,
imports: [ZardBreadcrumbModule, ZardIconComponent],
template: `
<z-breadcrumb zWrap="wrap" zAlign="start">
<z-breadcrumb-item [routerLink]="['/']">
<z-icon zType="house"></z-icon>
Home
</z-breadcrumb-item>
<z-breadcrumb-item [routerLink]="['/docs/components']">Components</z-breadcrumb-item>
<z-breadcrumb-item>Breadcrumb</z-breadcrumb-item>
</z-breadcrumb>
`,
})
export class ZardDemoBreadcrumbDefaultComponent {}
separator
import { Component } from '@angular/core';
import { ZardIconComponent } from '../../icon/icon.component';
import { ZardBreadcrumbModule } from '../breadcrumb.module';
@Component({
selector: 'z-demo-breadcrumb-separator',
standalone: true,
imports: [ZardBreadcrumbModule, ZardIconComponent],
template: `
<z-breadcrumb [zSeparator]="customSeparator">
<z-breadcrumb-item>Home</z-breadcrumb-item>
<z-breadcrumb-item>Components</z-breadcrumb-item>
<z-breadcrumb-item>Breadcrumb</z-breadcrumb-item>
</z-breadcrumb>
<ng-template #customSeparator>
<z-icon zType="arrow-right"></z-icon>
</ng-template>
`,
})
export class ZardDemoBreadcrumbSeparatorComponent {}
ellipsis
import { Component } from '@angular/core';
import { ZardMenuModule } from '../../menu/menu.module';
import { ZardBreadcrumbModule } from '../breadcrumb.module';
@Component({
selector: 'z-demo-breadcrumb-ellipsis',
standalone: true,
imports: [ZardBreadcrumbModule, ZardMenuModule],
template: `
<z-breadcrumb>
<z-breadcrumb-item [routerLink]="['/']">Home</z-breadcrumb-item>
<z-breadcrumb-item>
<z-breadcrumb-ellipsis z-menu [zMenuTriggerFor]="ellipsisMenu" />
<ng-template #ellipsisMenu>
<div z-menu-content class="w-48">
<button z-menu-item>Getting Started</button>
<button z-menu-item>Installation</button>
</div>
</ng-template>
</z-breadcrumb-item>
<z-breadcrumb-item>Components</z-breadcrumb-item>
<z-breadcrumb-item>Breadcrumb</z-breadcrumb-item>
</z-breadcrumb>
`,
})
export class ZardDemoBreadcrumbEllipsisComponent {}