Breadcrumbs

Navigation breadcrumbs showing the current page's location within a hierarchy

Import

import { AvBreadcrumbsImports } from '@avesra/angular';

Usage

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-basic-demo',
  imports: [AvBreadcrumbsImports],
  template: `<av-breadcrumbs>
      <li av-breadcrumbs-item href="#">Home</li>
      <li av-breadcrumbs-item href="#">Products</li>
      <li av-breadcrumbs-item href="#">Electronics</li>
      <li av-breadcrumbs-item>Laptop</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsBasicDemo {}

Anatomy

<av-breadcrumbs>
  <li av-breadcrumbs-item href="#">Home</li>
  <li av-breadcrumbs-item href="#">Category</li>
  <li av-breadcrumbs-item>Current Page</li>
</av-breadcrumbs>

Navigation Levels

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-level-2-demo',
  imports: [AvBreadcrumbsImports],
  template: `<av-breadcrumbs>
      <li av-breadcrumbs-item href="#">Home</li>
      <li av-breadcrumbs-item>Current Page</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsLevel2Demo {}

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-level-3-demo',
  imports: [AvBreadcrumbsImports],
  template: `<av-breadcrumbs>
      <li av-breadcrumbs-item href="#">Home</li>
      <li av-breadcrumbs-item href="#">Category</li>
      <li av-breadcrumbs-item>Current Page</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsLevel3Demo {}

Disabled State

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-disabled-demo',
  imports: [AvBreadcrumbsImports],
  template: `<av-breadcrumbs disabled>
      <li av-breadcrumbs-item href="#">Home</li>
      <li av-breadcrumbs-item href="#">Products</li>
      <li av-breadcrumbs-item href="#">Electronics</li>
      <li av-breadcrumbs-item>Laptop</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsDisabledDemo {}

Custom Separator

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-custom-separator-demo',
  imports: [AvBreadcrumbsImports],
  template: `<ng-template #customSeparator>
      <svg
        av-breadcrumbs-separator
        viewBox="0 0 256 512"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"
        />
      </svg>
    </ng-template>
    <av-breadcrumbs [separator]="customSeparator">
      <li av-breadcrumbs-item href="#">Home</li>
      <li av-breadcrumbs-item href="#">Products</li>
      <li av-breadcrumbs-item href="#">Electronics</li>
      <li av-breadcrumbs-item>Laptop</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsCustomSeparatorDemo {}

Render Function

In Angular, customize the host elements directly with attributes and classes — no render prop needed. Here data-custom is set on the root and each item.

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-custom-render-function-demo',
  imports: [AvBreadcrumbsImports],
  template: `<av-breadcrumbs data-custom="foo">
      <li av-breadcrumbs-item data-custom="bar">Home</li>
      <li av-breadcrumbs-item data-custom="bar">Products</li>
      <li av-breadcrumbs-item data-custom="bar">Electronics</li>
      <li av-breadcrumbs-item data-custom="bar">Laptop</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsCustomRenderFunctionDemo {}

Styling

Passing Tailwind CSS classes

Pass utility classes on the breadcrumbs host and items to customize layout, color, and decoration.

import { Component } from '@angular/core';
import { AvBreadcrumbsImports } from '@avesra/angular';

@Component({
  selector: 'app-breadcrumbs-custom-styles-demo',
  imports: [AvBreadcrumbsImports],
  template: `<av-breadcrumbs class="rounded-lg bg-default-soft px-3 py-2">
      <li av-breadcrumbs-item href="#">Home</li>
      <li av-breadcrumbs-item href="#">Products</li>
      <li av-breadcrumbs-item>Laptop</li>
    </av-breadcrumbs>`,
})
export class BreadcrumbsCustomStylesDemo {}

Customizing the component classes

To customize the Breadcrumbs classes, use the @layer components directive. Learn more.

@layer components {
  .av-breadcrumbs {
    @apply gap-4 text-lg;
  }

  .av-breadcrumbs__link {
    @apply font-semibold;
  }

  .av-breadcrumbs__separator {
    @apply text-blue-500;
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Breadcrumbs component uses these CSS classes:

Base Classes

.av-breadcrumbs — Base breadcrumbs container
.av-breadcrumbs__list — Ordered list wrapper
.av-breadcrumbs__item — Individual breadcrumb item wrapper
.av-breadcrumbs__link — Breadcrumb link element
.av-breadcrumbs__separator — Separator icon between items

State Classes

.av-breadcrumbs__link[data-current="true"] — Current page indicator (not a link)

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Current:[data-current="true"] on link (indicates current page)
Hover: Link elements support standard hover states
Disabled:disabled input disables all links

Accessibility

Breadcrumbs renders a nav landmark with aria-label="Breadcrumbs" and provides:

Proper ARIA attributes for navigation landmarks
Current page indication via aria-current="page"
Keyboard navigation support
Screen reader context for the trail

The last breadcrumb item (without href) automatically becomes the current page indicator.

API Reference

Compound API across av-breadcrumbs and li[av-breadcrumbs-item]. Optional svg[av-breadcrumbs-separator] (or any markup) can be provided via the separator template.

Prop	Type	Default	Description
`separator`	`TemplateRef<unknown> \| null`	`null`	Custom separator template between breadcrumb items (default chevron when omitted).
`disabled`	`boolean`	`false`	Whether all breadcrumb links are disabled.
`href`	`string`	—	The URL to link to (omit for current page) — `li[av-breadcrumbs-item]`.
`current`	`boolean`	—	Marks this item as the current page. Auto-detected for the last item when omitted — `li[av-breadcrumbs-item]`.