### File

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

### Description

Center-aligned container component for toolbar content, positioning elements in the middle of the toolbar. Provides a dedicated region for center-aligned content such as application name, search bar, or navigation tabs. Content is projected via ng-content allowing flexible composition of centered toolbar elements. Automatically applies flexbox centering within the toolbar layout for consistent positioning. Typically used within eui-toolbar to organize content in the center region between left and right toolbar items.

Example :

    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
          <eui-toolbar-center>
            <eui-toolbar-app appName="MyWorkplace"></eui-toolbar-app>
          </eui-toolbar-center>
          <eui-toolbar-items euiPositionRight>
            <button euiButton>Action</button>
          </eui-toolbar-items>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

### Accessibility

- Center positioning provides visual balance
- Content should follow proper semantic structure
- Interactive elements must be keyboard accessible
- Maintains consistent toolbar layout

### Notes

- Must be used within eui-toolbar for proper layout
- Positioned in center of toolbar between left and right content
- Content projected via ng-content
- Flexbox centering applied automatically
- Common content: app name, search bar, navigation tabs
- Works alongside toolbar-items and toolbar-mega-menu
- Provides visual balance in toolbar layout
- Responsive behavior inherits from toolbar

### Metadata

selector | `eui-toolbar-center`

template

    <ng-content />

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-toolbar__center'`

### Properties

string
Type : `string`
Default value : `'eui-toolbar__center'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""