# EuiToolbarItemsComponent

**Type:** component

<p>Container component for grouping toolbar items with flexible positioning options.
Provides a wrapper for organizing multiple toolbar items (buttons, icons, menus) with left or right alignment.
Content is projected via ng-content allowing flexible composition of toolbar actions and utilities.
Supports right-side positioning through euiEnd or euiPositionRight properties for consistent layout control.
Typically used within eui-toolbar to organize action buttons, user profile, notifications, and other toolbar elements.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-app&gt;
  &lt;eui-app-toolbar&gt;
    &lt;eui-toolbar&gt;
      &lt;eui-toolbar-mega-menu [items]=&quot;menuItems&quot;&gt;&lt;/eui-toolbar-mega-menu&gt;
      &lt;eui-toolbar-items euiPositionRight&gt;
        &lt;eui-toolbar-item-notifications&gt;
          &lt;eui-notifications [items]=&quot;notificationItems&quot;&gt;&lt;/eui-notifications&gt;
        &lt;/eui-toolbar-item-notifications&gt;
        &lt;eui-toolbar-item&gt;
          &lt;button euiButton&gt;Action&lt;/button&gt;
        &lt;/eui-toolbar-item&gt;
      &lt;/eui-toolbar-items&gt;
    &lt;/eui-toolbar&gt;
  &lt;/eui-app-toolbar&gt;
&lt;/eui-app&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Groups related toolbar actions logically</li>
<li>Content should be keyboard accessible</li>
<li>Interactive elements must have proper focus states</li>
<li>Maintains consistent toolbar navigation</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-toolbar for proper layout</li>
<li>Groups multiple eui-toolbar-item components</li>
<li>Content projected via ng-content</li>
<li>euiPositionRight or euiEnd for right alignment (default: left)</li>
<li>Both positioning properties are functionally equivalent</li>
<li>Common content: notifications, buttons, user profile</li>
<li>Typically used for right-aligned actions</li>
<li>Works with eui-toolbar-item children</li>
<li>Flexbox-based positioning</li>
<li>Multiple instances can exist in same toolbar</li>
</ul>


**Selector:** `eui-toolbar-items`

**Standalone:** false

## Inputs

- **euiEnd**: `boolean` - <p>Positions the toolbar items container to the right end of the toolbar.
When true, applies right alignment styling using flexbox positioning.</p>

- **euiPositionRight**: `boolean` - <p>Alternative property to position the toolbar items container to the right.
When true, applies right alignment styling. Functionally equivalent to euiEnd.</p>

