File

packages/components/eui-breadcrumb/breadcrumb.component.ts

Description

eui-breadcrumb navigation component displaying hierarchical page location with linked path segments. Automatically manages relationships between eui-breadcrumb items for proper navigation flow. Detects and coordinates child EuiBreadcrumbItemComponent instances through content projection. Provides semantic navigation structure with automatic previous/next item linking. Typically used for showing user location within site hierarchy and enabling quick navigation to parent pages.

Basic breadcrumb navigation

<eui-breadcrumb>
  <eui-breadcrumb-item link="/" iconSvgName="home:outline" ariaLabel="Home"></eui-breadcrumb-item>
  <eui-breadcrumb-item link="/products" label="Products"></eui-breadcrumb-item>
  <eui-breadcrumb-item link="/products/electronics" label="Electronics"></eui-breadcrumb-item>
  <eui-breadcrumb-item label="Laptops"></eui-breadcrumb-item>
</eui-breadcrumb>

With navigation extras

<eui-breadcrumb>
  <eui-breadcrumb-item link="/" iconSvgName="home:outline"></eui-breadcrumb-item>
  <eui-breadcrumb-item
    link="/services"
    label="Services"
    [navigationExtras]="{ queryParams: { page: 1 } }">
  </eui-breadcrumb-item>
</eui-breadcrumb>

Accessibility

• Provides semantic navigation structure for screen readers
• Each item is keyboard accessible and focusable
• ARIA labels on icons provide context for screen reader users
• Current page (last item) is typically not linked
• Separators between items are handled automatically

Notes

• Must contain eui-breadcrumb-item children for proper functionality
• Automatically establishes previous/next relationships between items
• Items are rendered in the order they appear in the template
• Last item typically represents current page and should not have a link
• Supports responsive behavior with automatic item collapsing
• Uses Angular Router for navigation when links are provided
• External URLs (starting with 'http') open in same window

Implements

AfterContentInit OnDestroy