# EuiBreadcrumbComponent

**Type:** component

<p><code>eui-breadcrumb</code> navigation component displaying hierarchical page location with linked path segments.
Automatically manages relationships between <code>eui-breadcrumb</code> 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.</p>
<h4>Basic breadcrumb navigation</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-breadcrumb&gt;
  &lt;eui-breadcrumb-item link=&quot;/&quot; iconSvgName=&quot;home:outline&quot; ariaLabel=&quot;Home&quot;&gt;&lt;/eui-breadcrumb-item&gt;
  &lt;eui-breadcrumb-item link=&quot;/products&quot; label=&quot;Products&quot;&gt;&lt;/eui-breadcrumb-item&gt;
  &lt;eui-breadcrumb-item link=&quot;/products/electronics&quot; label=&quot;Electronics&quot;&gt;&lt;/eui-breadcrumb-item&gt;
  &lt;eui-breadcrumb-item label=&quot;Laptops&quot;&gt;&lt;/eui-breadcrumb-item&gt;
&lt;/eui-breadcrumb&gt;</code></pre></div><h4>With navigation extras</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-breadcrumb&gt;
  &lt;eui-breadcrumb-item link=&quot;/&quot; iconSvgName=&quot;home:outline&quot;&gt;&lt;/eui-breadcrumb-item&gt;
  &lt;eui-breadcrumb-item
    link=&quot;/services&quot;
    label=&quot;Services&quot;
    [navigationExtras]=&quot;{ queryParams: { page: 1 } }&quot;&gt;
  &lt;/eui-breadcrumb-item&gt;
&lt;/eui-breadcrumb&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provides semantic navigation structure for screen readers</li>
<li>Each item is keyboard accessible and focusable</li>
<li>ARIA labels on icons provide context for screen reader users</li>
<li>Current page (last item) is typically not linked</li>
<li>Separators between items are handled automatically</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must contain eui-breadcrumb-item children for proper functionality</li>
<li>Automatically establishes previous/next relationships between items</li>
<li>Items are rendered in the order they appear in the template</li>
<li>Last item typically represents current page and should not have a link</li>
<li>Supports responsive behavior with automatic item collapsing</li>
<li>Uses Angular Router for navigation when links are provided</li>
<li>External URLs (starting with &#39;http&#39;) open in same window</li>
</ul>


**Selector:** `eui-breadcrumb`

**Standalone:** false
