Angular Breadcrumb Component

Example

The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.

import { Component } from '@angular/core';
import { BreadcrumbComponent, BreadcrumbItemComponent } from '@coreui/angular';

@Component({
  selector: 'docs-breadcrumb-example',
  templateUrl: './breadcrumb-example.component.html',
  imports: [BreadcrumbComponent, BreadcrumbItemComponent]
})
export class BreadcrumbExampleComponent {}

<c-breadcrumb>
  <c-breadcrumb-item [active]="true">Home</c-breadcrumb-item>
</c-breadcrumb>
<c-breadcrumb>
  <c-breadcrumb-item url="#">Home</c-breadcrumb-item>
  <c-breadcrumb-item [active]="true">Library</c-breadcrumb-item>
</c-breadcrumb>
<c-breadcrumb>
  <c-breadcrumb-item url="#">Home</c-breadcrumb-item>
  <c-breadcrumb-item url="#">Library</c-breadcrumb-item>
  <c-breadcrumb-item [active]="true">Data</c-breadcrumb-item>
</c-breadcrumb>

Dividers

Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --coreui-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

import { Component } from '@angular/core';
import { BreadcrumbComponent, BreadcrumbItemComponent } from '@coreui/angular';

@Component({
  selector: 'docs-breadcrumb-dividers',
  templateUrl: './breadcrumb-dividers.component.html',
  imports: [BreadcrumbComponent, BreadcrumbItemComponent]
})
export class BreadcrumbDividersComponent {}

<c-breadcrumb [style]="'--cui-breadcrumb-divider:\'>\''">
  <c-breadcrumb-item url="#">Home</c-breadcrumb-item>
  <c-breadcrumb-item [active]="true">Library</c-breadcrumb-item>
</c-breadcrumb>

When modifying via Sass, the quote function is required to generate the quotes around a string. For example, using > as the divider, you can use this:

$breadcrumb-divider: quote(">");

It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { BreadcrumbComponent, BreadcrumbItemComponent } from '@coreui/angular';

@Component({
  selector: 'docs-breadcrumb-dividers-2',
  templateUrl: './breadcrumb-dividers-2.component.html',
  imports: [BreadcrumbComponent, BreadcrumbItemComponent, RouterLink]
})
export class BreadcrumbDividers2Component {}

<c-breadcrumb style="--cui-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);">
  <c-breadcrumb-item [routerLink]>Home</c-breadcrumb-item>
  <c-breadcrumb-item [active]="true">Library</c-breadcrumb-item>
</c-breadcrumb>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

You can also remove the divider setting --cui-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.

import { Component } from '@angular/core';
import { BreadcrumbComponent, BreadcrumbItemComponent } from '@coreui/angular';

@Component({
  selector: 'docs-breadcrumb-dividers-3',
  templateUrl: './breadcrumb-dividers-3.component.html',
  imports: [BreadcrumbComponent, BreadcrumbItemComponent]
})
export class BreadcrumbDividers3Component {}

<c-breadcrumb style="--cui-breadcrumb-divider: ''">
  <c-breadcrumb-item url="#">Home</c-breadcrumb-item>
  <c-breadcrumb-item [active]="true">Library</c-breadcrumb-item>
</c-breadcrumb>

$breadcrumb-divider: none;

Accessibility

Since breadcrumbs provide navigation, it’s useful to add a significant label such as aria-label="breadcrumb" to explain the type of navigation implemented in the <nav> element. You should also add an aria-current="page" to the last item of the set to show that it represents the current page. CoreUI for Angular automatically add all of this labels to breadcrumb’s components.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.

API

Breadcrumb Module

import { BreadcrumbModule } from '@coreui/angular';

@NgModule({
  imports: [BreadcrumbModule,]
})
export class AppModule(){}

c-breadcrumb

component

import { BreadcrumbComponent } from '@coreui/angular'

c-breadcrumb-item

component

import { BreadcrumbItemComponent } from '@coreui/angular'

c-breadcrumb-router

component

import { BreadcrumbRouterComponent } from '@coreui/angular'

BreadcrumbRouter Service

You can override BreadcrumbRouterService in a providers section.

...
providers: [
  { provide: BreadcrumbRouterService, useClass: yourBreadcrumbRouterService }
]