# EuiHeaderComponent

**Type:** component

<p>Standalone header component for displaying page-level or section-level headers with branding and navigation.
Provides a flexible container with support for left and right content areas through content projection.
Unlike eui-app-header which is part of the application shell, this component can be used independently within page layouts.
Automatically detects and positions EuiHeaderRightContentComponent when projected for consistent right-aligned content placement.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Within eui-app-header --&gt;
&lt;eui-app&gt;
  &lt;eui-app-header&gt;
    &lt;eui-header&gt;
      &lt;eui-header-logo&gt;&lt;/eui-header-logo&gt;
      &lt;eui-header-environment&gt;DEV&lt;/eui-header-environment&gt;
      &lt;eui-header-app appName=&quot;MyWorkplace&quot;&gt;&lt;/eui-header-app&gt;
      &lt;eui-header-user-profile&gt;&lt;/eui-header-user-profile&gt;
    &lt;/eui-header&gt;
  &lt;/eui-app-header&gt;
&lt;/eui-app&gt;

&lt;!-- Standalone usage --&gt;
&lt;eui-header&gt;
  &lt;h1&gt;Page Title&lt;/h1&gt;
  &lt;eui-header-right-content&gt;
    &lt;button euiButton&gt;Action&lt;/button&gt;
  &lt;/eui-header-right-content&gt;
&lt;/eui-header&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provides semantic header structure</li>
<li>Content should follow proper heading hierarchy</li>
<li>Interactive elements must be keyboard accessible</li>
<li>Maintains consistent navigation patterns</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Can be used within eui-app-header or standalone</li>
<li>Content projected via ng-content</li>
<li>Automatically detects eui-header-right-content for alignment</li>
<li>Supports all eui-header-* child components</li>
<li>Common children: eui-header-logo, eui-header-environment, eui-header-app</li>
<li>eui-header-user-profile typically positioned at the end</li>
<li>Flexible layout adapts to projected content</li>
<li>Use within eui-app-header for application shell integration</li>
<li>Use standalone for page-level or section headers</li>
</ul>


**Selector:** `eui-header`

**Standalone:** false
