# EuiPageBreadcrumbComponent

**Type:** component

<p>Breadcrumb container component for eui-page that provides a navigation trail area.
Displays hierarchical navigation path showing the user&#39;s location within the application structure.
Typically positioned near the top of the page, above the main header or content.
Should contain eui-breadcrumb component or custom breadcrumb navigation elements.
Must be used as a direct child of eui-page to maintain proper layout structure.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page&gt;
  &lt;eui-page-breadcrumb&gt;
    &lt;eui-breadcrumb [items]=&quot;breadcrumbItems&quot;&gt;&lt;/eui-breadcrumb&gt;
  &lt;/eui-page-breadcrumb&gt;
  &lt;eui-page-content&gt;Content here&lt;/eui-page-content&gt;
&lt;/eui-page&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use eui-breadcrumb component which provides proper ARIA navigation landmark</li>
<li>Ensure breadcrumb links have descriptive text for screen readers</li>
<li>Current page should be indicated with aria-current=&quot;page&quot;</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be a direct child of eui-page component</li>
<li>Typically placed before page header or content sections</li>
<li>Provides consistent spacing and alignment with page layout</li>
</ul>


**Selector:** `eui-page-breadcrumb`

**Standalone:** false
