Breadcrumb

Overview

Breadcrumbs visually represent the navigational structure of a site or app and help users navigate to parent levels with ease. Each breadcrumb item corresponds to a level in the hierarchy, with the last item indicating the current page or context.

<nav aria-label="Breadcrumb">
	<ol daff-breadcrumb>
		<li daffBreadcrumbItem>
			<a routerLink="/link">Link 1</a>
		</li>
		<li daffBreadcrumbItem>
			<a routerLink="/link">Link 2</a>
		</li>
		<li daffBreadcrumbItem>
			<a routerLink="/link">Link 3</a>
		</li>
		<li daffBreadcrumbItem>
			<a routerLink="/link">Link 4</a>
		</li>
		<li daffBreadcrumbItem>
			<a routerLink="/link">Link 5</a>
		</li>
		<li daffBreadcrumbItem>
			<a routerLink="/link">Link 6</a>
		</li>
		<li daffBreadcrumbItem>Link 7</li>
	</ol>
</nav>

Best practices

When to use

• Your site has a hierarchical structure with multiple levels
• Users need to understand their location within the site
• You want to provide quick navigation to parent pages

Usage

Within a standalone component

To use breadcrumb in a standalone component, import DAFF_BREADCRUMB_COMPONENTS directly into your custom component:

import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_BREADCRUMB_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use breadcrumb in a module, import DaffBreadcrumbModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffBreadcrumbModule } from '@daffodil/design/breadcrumb';
import { CustomComponent } from './custom.component';

@NgModule({
  declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffBreadcrumbModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Anatomy

A breadcrumb consists of the following components:

Container

[daff-breadcrumb]: The wrapper that groups all breadcrumb items together. Applied to an <ol> element.

Item

[daffBreadcrumbItem]: Individual breadcrumb element within the navigation path. Applied to a <li> element.

Basic structure

<ol daff-breadcrumb>
  <li daffBreadcrumbItem>
    <a routerLink="/">Home</a>
  </li>
  <li daffBreadcrumbItem>
    <a routerLink="/category">Category</a>
  </li>
  <li daffBreadcrumbItem>
    <span>Current Page</span>
  </li>
</ol>

Features

Truncation

Breadcrumbs are automatically truncated into an overflow menu on mobile viewports. On desktop, truncation occurs when more than five items are present.

Accessibility

Breadcrumb follows the Breadcrumb WAI-ARIA design pattern.

Daffodil provides

• aria-current="page" automatically applied to the last breadcrumb item
• Enforces semantic HTML structure (requires <ol> and <li> elements)

Developer responsibilities

• Wrap the breadcrumb in a <nav> element with a descriptive aria-label

<nav aria-label="Category breadcrumb">
  <ol daff-breadcrumb>
    <li daffBreadcrumbItem>
      <a routerLink="/">Home</a>
    </li>
    <li daffBreadcrumbItem>
      <a routerLink="/category">Category</a>
    </li>
    <li daffBreadcrumbItem>
      <span>Current Page</span>
    </li>
  </ol>
</nav>