### File

`packages/components/layout/eui-toolbar/toolbar-items/toolbar-items.component.ts`

### Description

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.

Example :

    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
          <eui-toolbar-items euiPositionRight>
            <eui-toolbar-item-notifications>
              <eui-notifications [items]="notificationItems"></eui-notifications>
            </eui-toolbar-item-notifications>
            <eui-toolbar-item>
              <button euiButton>Action</button>
            </eui-toolbar-item>
          </eui-toolbar-items>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

### Accessibility

- Groups related toolbar actions logically
- Content should be keyboard accessible
- Interactive elements must have proper focus states
- Maintains consistent toolbar navigation

### Notes

- Must be used within eui-toolbar for proper layout
- Groups multiple eui-toolbar-item components
- Content projected via ng-content
- euiPositionRight or euiEnd for right alignment (default: left)
- Both positioning properties are functionally equivalent
- Common content: notifications, buttons, user profile
- Typically used for right-aligned actions
- Works with eui-toolbar-item children
- Flexbox-based positioning
- Multiple instances can exist in same toolbar

### Metadata

selector | `eui-toolbar-items`

template

    <ng-content />

### Index

###### Inputs

- euiEnd
- euiPositionRight

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

euiEnd
Type : `boolean`
Default value : `false`
Positions the toolbar items container to the right end of the toolbar. When true, applies right alignment styling using flexbox positioning.

euiPositionRight
Type : `boolean`
Default value : `false`
Alternative property to position the toolbar items container to the right. When true, applies right alignment styling. Functionally equivalent to euiEnd.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""