# EuiBreadcrumbComponent

**Type:** component



`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
```html
<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
```html
<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


**Selector:** `eui-breadcrumb`